1차 프로젝트인 H&M을 클론 코딩하면서 로그인때 저장한 토큰으로 장바구니나 즐겨찾기에 접근을 할때 토큰이 필요해서 그거에 대해 간략하게 정리해 보겠습니다.

로그인 페이지

먼저 로그인을 하면서 받아온 setItem( ) 으로 토큰을 로컬 스토리지에 저장한다.

 goToMain = () => {
    const { email, password } = this.state;
    fetch(API.signin, {
      method: 'POST',
      body: JSON.stringify({
        email: email,
        password: password,
      }),
    })
      .then(res => res.json())
      .then(res => {
        console.log(res);
        if (res.ACCESS_TOKEN) {
          localStorage.setItem('token', res.ACCESS_TOKEN);
          this.props.history.push('/');
        } else if (!res.ACCESS_TOKEN) {
          alert('아이디, 비밀번호를 확인해주세요');
        }
      });
  };

장바구니 페이지

즐겨찾기에 담기 위해서는 먼저 로그인을 해야한다. 즉 토큰이 필요하다.
로그인을 하면서 로컬 스토리지에 저장된 token을 다시 getItem( ) headers에 담아 POST해야 한다.

componentDidMount() {
    fetch(`${API.like}`, {
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
      .then(res => res.json())
      .then(result => {
        this.setState({
          favoritesList: result,
        });
      });
  }

짧은 회고

처음에 토큰을 저장할려고 했을때 토큰이 로컬스토리지에 저장이 안되어서 임의로 토큰 한개 값을 headers에 적어두고 했었는데 이렇게 하면 로그인과 회원가입을 하는 의미가 없어져서 왜 안될까 고민을 해보다 콘송을 찍어보니 토큰이 ACCESS_TOKEN으로 찍히는걸 알게되고 지금까지 res.token으로 해서 안됬던걸 파악하게 되어 시도해 보니 백에드와 연결에 성공해 아이디별로 다른 즑찾기 품목이 나와서 기뻤었다. 팀프로젝트를 하면서 많은걸 배운거 같아 좋은 시간이였던거 같다.