게시판 만들기 (3) 세션관리 훅 만들기(useSession)

React에서 hook이란? 

공식문서에서는 다음과 같이 정의합니다.

Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다.

React 공식문서에서의 hook의 motivation의 결론은 다음과 같습니다.

 Hook을 통해 서로 비슷한 것을 하는 작은 함수의 묶음으로 컴포넌트를 나누는 방법을 사용할 수 있습니다.

 

---

저의 게시판에서 사용할 훅은 세션관리에 이용할 custom hook입니다.

매 페이지마다 login session을 관리하여, token의 생명을 검사하고, refresh와 logout 등의 관리를 하는 hook입니다.

 

현재 로그인을 진행하면 cookie를 통해 accessToken과 refreshToken등을 관리하며, 사용합니다.

custom hook인 useSession 안에서는 쿠키를 불러와 accessToken의 값들을 살펴보고,

토큰의 만기시간을 비교해, refresh가 필요하면 진행, 토큰이 없거나 유효하지 않으면, 다시 로그인을 하는 페이지로 이동을 시킬겁니다.

// useSession.ts

import { useEffect } from 'react';
import { useRouter } from 'next/router';
import { refreshToken } from 'src/apis/userApi';
import Cookies from 'js-cookie';
import { jwtDecode } from 'jwt-decode';

interface atInterface {
  mobile: string;
  exp: string;
  iat: string;
  nickName: string;
  email: string;
}

const useSession = () => {
  const router = useRouter();
  const at = Cookies.get('WMS_accessToken');
  const rt = Cookies.get('WMS_refreshToken');

  useEffect(() => {
    if (!at || !rt) {
      router.push('/login');
    }
    if (at) {
      const atDecoded: atInterface = jwtDecode(at);
      const cur = new Date().getTime();
      const sessionExpTime = parseInt(atDecoded.exp + '000');

      const refreshSession = async () => {
        const res = await refreshToken(at, rt);
        if (res && res.success) {
          Cookies.set('WMS_accessToken', res.data.accessToken);
          Cookies.set('WMS_refreshToken', res.data.refreshToken);
        } else {
          Cookies.remove('WMS_accessToken');
          Cookies.remove('WMS_refreshToken');
          router.push('/login');
        }
      };

      if (cur > sessionExpTime) {
        console.log('refreshToken!');
        refreshSession();
      } else {
        console.log('Token is alive.');
      }
    }
  }, [at, rt, router]);
};

export default useSession;

 

이를 session 관리가 필요한 page에 적용하여 실행시켜주기만 하면 됩니다.

//pages/somepage/index.tsx

...

const SomePage = () => {
	...
    
    useSession();
    
    ...
    
    return (...)
}