TIL. localStorage

Today I learn

localStorage in Login

로그인 할 때 백엔드에서 token을 받아오는데 이를 localStorage에 저장한다.
이유는 token을 가지고 있는 사용자는회원인 사용자로 분류가 되고 더이상 로그인을 해줄 필요없어야 하기때문에 로컬에 저장해준다.

login form이 제출되면 사용자가 입력한 아이디와 패스워드정보를 서버에 전달하고 서버 데이터베이스에 있는 정보와 일치하면 token이라는 이름으로 토큰을 보내주는데 이를 localStorate에 저장한다.

  onSubmitForm = e => {
    const { email, password } = this.state;
    e.preventDefault();

    fetch(LOGIN_APIKEY, {
      method: 'POST',
      body: JSON.stringify({
        email,
        password,
      }),
    })
      .then(res => res.json())
      .then(res => {
        localStorage.setItem('token', res.token);
      });

    this.setState({ email: '', password: '' });
  };

만약, 토큰을 가지고 있는 상태에서 추가적이 요청을 해야한다면 사용자가 받은 토큰을 request할때 같이보내주면 된다.
토큰을 저장할때는 localStorage.setItem(토큰정보) 를 사용했으니 불러올때는 setItem대신 getItem을 사용하면 된다.

예를들어, 특정 modal창이 로그인했을때만 유효하게 작동한다면 post requset할때 토큰을 같이 보내주면된다.

  modal 함수 = () => {
    fetch(API주소, {
      method: 'GET',
      headers: {
        Authorization: localStorage.getItem('token'),
      },
    })
      .then(res => res.json())
      .then(res => 반영해줄 로직 )
  };

그리고 마지막으로 logout할때는 이 방법을 사용하지않는다고 알고있지만 token을 제거해주고 싶다면 localStorage.removeItem(토큰정보) 이렇게 해주면 된다.