[React] 로그인-Recoil로 localStorage에 토큰 저장하기

로그인을 성공하면 서버에서 accesstoken과 refreshtoken을 응답 헤더로 넘겨준다.

프론트에서는 이 토큰들을 recoilPersist를 통해 sessionStorage에 저장해 사용자가 다른 페이지로 이동할때에도 토큰들을 사용하여 인증된 사용자 요청을 보낼 수 있도록 하였다.

(recoilPersist를 이용하지 않고 저장하면, 페이지를 새로고침하거나 다른 페이지로 이동할때 저장한 토큰들이 다 날아가버린다.)

 

1.  토큰 상태 생성

State폴더 안에 Atom.ts파일을 만들어서 관리하였다.

persistAtom에 저장된 토큰들을 모두 sessionStorage에 저장한다.

localStorage와 sessionStorage의 차이점은 페이지를 닫을 때 데이터들이 사라지는지의 여부이다. 진행 중인 프로젝트에서는 페이지를 닫을 때 사용자의 로그인 상태가 저장될 필요가 없다고 판단하여 sessionStorage에 토큰을 저장했다.

import { atom } from 'recoil';
import { recoilPersist } from 'recoil-persist';

const { persistAtom } = recoilPersist({
  key:"sessionStorage",
  storage: sessionStorage,
});

export const accessTokenState = atom({
  key: 'accessTokenState',
  default: '',
  effects_UNSTABLE:[persistAtom],
});

export const refreshTokenState = atom({
  key: 'refreshTokenState',
  default: '',
  effects_UNSTABLE:[persistAtom],
});

 

 

2.  토큰 저장

로그인 요청을 처리하는 함수 안에서 서버로부터 응답받은 토큰을 받아와 저장했다.

응답헤더에서 토큰을 받아와서 useSetRecoilState을 통해 각 토큰이 Recoil 상태를 업데이트했다.

  import { useSetRecoilState } from 'recoil';
  import { accessTokenState, refreshTokenState } from "../states/Atom";
  
  const setAccessToken = useSetRecoilState(accessTokenState);
  const setRefreshToken = useSetRecoilState(refreshTokenState);
  
  const handleLogIn = async () => {
    try {
      await axios.post('api/login', {
        loginId,
        password,
      })
      .then(response => {

        if(response.headers){
          const accessToken = response.headers['authorization'];
          const refreshToken = response.headers['refresh-token'];

          setAccessToken(accessToken);
          setRefreshToken(refreshToken);
        }
      });
    } catch (error) {
      // 에러문구 출력
    }
  };