20220224_TIL : refresh Token

권지현·2022년 2월 24일
0
post-thumbnail

로그인 인증을 위한 accessToken은 제한 시간이 있기 때문에 refresh Token으로 만료시간이 되면 자동으로 accessToken을 갱신시켜주는 방법으로 로그인을 유지시켜줬다. (refreshToken 만료 이후에는 다시 로그인시켜줘야함.)

로그인 진행했을때 accessToken/ refreshToken 두 가지를 받아와서 accessToken은 Global state로 저장해서 필요한 페이지에서 불러오고, refreshToken은 쿠키에 저장해서 유출 위험을 방지한다.

//_app.tsx
const uploadLink = createUploadLink({
    uri: "https://Graph-ql API 주소",
    headers: { Authorization: `Bearer ${accessToken}` },
    credentials: "include", 
  });

이후에 유저는 확인할 수 없지만 accessToken 만료될 경우 벡엔드에서는 Browser로 UNAUTHENTED(인가 관련 에러) 에러 메세지를 보낸다. 인가 관련 에러일 경우 refreshToken을 가지고 accessToken 재발급 요청을 진행,
새로 발급받은 accessToken을 변수(state)로 다시 설정하고 기존에 요청에 실패했던 API를 새로 받은 accessToken으로 다시 요청하는 방식으로 진행된다.

//인가 에러 관련 accessToken 재발급 과정

const errorLink = onError(({ graphQLErrors, operation, forward }) => {
  
    // 1.에러 캐치
    if (graphQLErrors) {
      for (const err of graphQLErrors) {
        
        // 2.토큰 만료 에러인지 확인(UNAUTHENTICATED)
        if (err.extensions.code === "UNAUTHENTICATED") {
          
// 3.refreshToken으로 accessToken 재발급받기
// 여기서 useQuery, useMutation 사용불가
// ApolloClient ApolloLink setting 이전 -> 라이브러리를 사용(graphql-request)
         getAccessToken().then((newAccessToken) => {
            
         // 4.재발급받은 accessToken 저장하기
         setAccessToken(newAccessToken);

         // 5.재발급받은 accessToken으로 실패한 query 재요청하기
         operation.setContext({
            headers: {
              //기존 내용은 그대로, authorization만 변경되서 적용
              ...operation.getContext().headers,
              //uploadlink 인증 절차
              Authorization: `Bearer ${newAccessToken}`,
            },
          });
          return forward(operation); // 변경된 opration 재요청
        });
      }
    }
  }

⚡️ 여기서 문제는,

RefreshToken은 벡엔드와 정보를 주고받을 수 있도록 옵션 설정 후 쿠키에 저장해주고, accessToken은 변수로 저장한 후에,

권한 분기를 통해 로그인한 사용자만 글 작성이나 수정을 할 수 있다면, 변수로 전달해 준 accessToken의 값이 들어가기 전에 권한분기 withAuth가 실행된다는 것이다. 그래서 토큰이 있더라도 권한 분기 컴포넌트에서는 초기값으로 설정한 빈 문자열이 들어가있기때문에 로그인 화면으로 계속 화면을 전환한다.
권한 분기 관련 추가 방법을 고민해보고 주말 전까지 해결해야겠다.

👩🏻‍💻 오늘의 TIL …

어제는 useEffect 무한루프, 오늘은 권한분기로 쉽지않은 오류를 많이 접했는데 동기들이 같이 고민해줘서 그래도 할 수 있었던 것 같다. 이번 주말은 개인 프로젝트 무조건 보완하도록 하자.

✔️ 중고마켓 CSS 필수
✔️ 결제 및 이번주 적용한 기능 재확인(특히, 수정)

profile
FE 개발자 성장 기록 👩🏻‍💻

0개의 댓글