권한 분기 (로그인)

권한 분기란 간단하게 로그인 같은 걸로 해당 페이지에 접속, 버튼 같은것을 클릭 할수 있는 권한, 데이터에 대한 접근 권한 같은것을 분기처리하는 것을 이야기 한다

---

  const onClickLogin = async (): Promise<void> => {
    try {
      // 1. 로그인 뮤테이션 날려서 accessToken 받아오기
      const result = await loginUser({
        variables: { email, password },
      });
      const accessToken = result.data?.loginUser.accessToken;
      console.log(accessToken);

      // 2. 받아온 accessToken을 globalState에 저장하기
      if (accessToken === undefined) {
        alert("로그인에 실패했습니다 다시 시도해 주세요.");
        return;
      }
      setAccessToken(accessToken);
      localStorage.setItem("accessToken", accessToken);

      // 3. 로그인 성공페이지로 이동하기
      void router.push("/loginSuccess");
    } catch (error) {
      if (error instanceof Error) alert(error.message);
    }
  };

처음은 위와같이 localStorage에 accessToken을 저장을 했었다
하지만 localStorage에 저장을 하게 되면 한개 토큰이 계속해서 남아 있게 됨으로 보안에 취약하다는 단점이 있다

그래서

로그인시 받는 accessToken을 recoil을 사용하여 글로벌 스테이트에 저장을 해서

export const useWithAuth = (): void => {
  const [accessToken] = useRecoilState(accessTokenState);
  const { routerMovePage } = useRouterMovePage();

  useEffect(() => {
    if (accessToken === "") {
      Modal.info({
        content: "로그인 후 이용 가능합니다.",
        onOk() {
          routerMovePage("/login");
        },
      });
    }
  }, []);
};

위와 같은 함수를 만들어서 글로벌 스테이트에 accessToken이 없다면 로그인 페이지로 가는 로직을 만들어 권한 분기가 필요한 곳에 적용을 시켰다

하지만 이 글로벌 스테이트는 새로고침을 하게 되면 accessToken이 날라가게 됨으로 로그인시 Refresh Token을 쿠키에 저장하게 했고

_app안에있는 apollo설정에 useEffect를 사용해서 페이지가 렌더링 될때
Refresh Token을이용하여 새로운 accessToken을 받아와서 글로벌 스테이트에 저장하게 만들었다

---

또한 여기서 통신을 할때 accessToken이 만료되어서 오류가 발생하면은
graphql-request 라이브러리를 사용하여 Silent Authentication 즉 유저는 모르게 Refresh Token을 이용하여 새로운 accessToken을 받아오고 다시 해당 통신을 요청하도록 했다