AccessToken과 로그인 관리

1. AccessToken의 만료

로그인을 하면 서버로부터 받아온 JWT 토큰에는

{
  "isSuccess": true,
  "message": "string",
  "responseCode": 0,
  "result": {
    "accessToken": "string",
    "oauthType": "KAKAO",
    "refreshToken": "string",
    "userId": 0,
    "userName": "string"
  }
}

형태로 Get 해온다 (우리 서버 한정 양식). 그럼 토큰 두개와 로그인에서 허용된 정보를 불러오게 된다. 이때 두 토큰은 유효기간이 있다. 유효기간은 벡에서 설정해줄 수 있고 보통 acessToken 이 refreshToken 보다 빨리 소멸한다. 당연한 이야기이다. 우리는 accessToken이 만료되었을때 refreshToken을 이용해서 재발급 받기 때문이다.

본론으로 돌아와서 우리는 서버로 post 할때 header에 accessToken을 포함시켜 같이 보낸다. 그때 서버는 이 accessToken이 유효한지 만료된 토큰인지 검사한다. 유효한 토큰이면 정상진행하고 유효된 토큰이면 유효된 accessToken이라고 프론트로 알림을 보낸다. 그러면 프론트에서는 로그아웃을 시도하거나 저장해놨던 refreshToken을 서버로 보내주고 다시 새로운 accessToken을 받아오는 방법 중 택해야한다. 우리는 후자를 택할 생각이다. 그렇게 만료된 accessToken을 새로운 토큰을 받아오며 로그인 상태를 유지할 수 있다.

2. Recoil을 사용한 로그인 상태 관리

recoil 이 자신을 소개하는 문구로는

Recoil 을 시작하기 위해선 index.tsx (혹은 index.jsx) 에서 렌더링 하고 있는 root 를 RecilRoot 를 통해서 감싸줘야 한다. Recoil은 atom 들이 떠다니는 Root 를 설정해준다고 추상화 하면 이해하기 쉽다.

import React from 'react';
import ReactDOM from 'react-dom/client';
import { RouterProvider } from 'react-router-dom';
import App from './App';
import Router from './Router';
import { RecoilRoot } from 'recoil';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    // <React.StrictMode>
    <RecoilRoot>
        <RouterProvider router={Router}>
            <App />
        </RouterProvider>
    </RecoilRoot>
    // </React.StrictMode>

Recoil의 Atom

atom

Recoil 의 첫 번째 핵심 개념은 atom 이다.

간단히 이해하고자 한다면 atom 을 비눗방울로 추상화 할 수 있다. 우리가 만드는 Web Application 을 구조화 한다면 그 구조의 상단에 atom 이 비눗방울 처럼 둥둥 떠다니고 있다고 추상화 할 수 있다. 만약 개발을 하다가 어떤 비눗방울 (상태) 이 필요하다면 해당하는 비눗방울만 쏙 빼서 쉽게 사용할 수 있다. 페이스북에서 설명해주는 영상을 참고하면 이해하기 쉽다.

Atom 에는 무엇을 담는가?

atom 에는 우리가 사용할 상태를 담는다. 우리가 전역적으로 사용하길 원하는 state을 담아서 atom 에 저장해 어디서든 사용할 수 있게 하는 것이다. 난 로그인 상태를 담아서 전역적으로 사용할 생각이다.

import { atom } from 'recoil';

export const isLoginAtom = atom({
    key: 'isLogin',
    default: false,
});

로그인 기본값을 false로 설정하고 로그인을 하면 true 로 바꿔줄것이다.

useState과 쓰임새가 비슷하다. 우리가 useState을 사용할때

const [data, setData] = useState('Default Value');

이런식으로 저장해서 data에 다루고 싶은 정보를 담고 setData 를 활용하여 data의 변화를 담당하는 역할을 했다.

똑같이 recoil에도 사용할 수 있는 hook들이 있다. 3개가 있는데 소개해보려고 한다.

• useRecoilState

  useState과 비슷한 원리로 동작한다.

  const [value, setValue] = useRecoilState(isLoginAtom);

  내가 지정해준 atom 값을 넣어주면 기본 값으로 저장된다.

• useRecoilValue

  값만을 다루는 hook이다

  const isLogin = useRecoilValue(isLoginAtom);

  defalult 값을 false라고 atom에서 설정해주었기 때문에 나는 isLogin을 사용하여 로그인 true / false 를 다룰 에정이다.

• useSetRecoilState

  data 값을 다루는 hook이다

  const setLogin = useSetRecoilState(isLoginAtom);

recoil 에 대해 간단히 알아봤으니 다음 글에서는 recoil 을 사용하여 로그인 상태 관리를 전역적으로 하여 로그인일때와 로그인이 안되있을때 뜨는 창을 구분해보려고 한다.