JWT 토큰(Access Token, Refresh Token)

JWT이란 JSON 형식의 데이터를 안전하게 전송하기 위한 토큰

   // 로그인 시 토큰 발급
   const { data } = await axios.post('api/acnt/jwt/login', rq);
   cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken);
   cookieStorage.setCookie(COOKIE_REFRESH_TOKEN, data.refreshToken);

 

JWT 토큰 인증방식은 비밀키로 암호화함

=> 해킹에 대비해 유효기간을 둠!

• Access Token
  • 유효기간이 짧음
  • 주로 api 통신할 때 사용
• Refresh Token
  • 유효기간이 길음
  • 주로 Access Token이 만료되어 갱신될 때만 사용

클라 - 서버 통신

1. 로그인한 유저는 Access Token, Refresh Token을 서버로부터 받음

2. 클라는 위 두개 토큰을 로컬에 저장

export const setLogin = createAsyncThunk(
  'account/setLogin',
  async (rq: ISetLoginRq, thunkAPI) => {
    try {
      const { data } = await axios.post('api/acnt/jwt/login', rq);
      
      // 두 토큰을 쿠키에 저장
      cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken);
      cookieStorage.setCookie(COOKIE_REFRESH_TOKEN, data.refreshToken);
      // ...
    }
  }
);

 

3. Access Token 유효기간이 만료시 401 에러를 받음

4. 헤더에 Access Token 대신 Refresh Token을 넣어서 api 재요청

axios.interceptors.response.use(
  response => response,
  async error => {
    if (error.response?.status === 401) {
      try {
        // Refresh Token으로 새로운 Access Token 요청
        const refreshToken = cookieStorage.getCookie(COOKIE_REFRESH_TOKEN);
        const { data } = await axios.post('api/acnt/jwt/refresh', {
          refreshToken
        });
        
        // 새로운 Access Token 저장
        cookieStorage.setCookie(COOKIE_ACCESS_TOKEN, data.accessToken);
        
        // 실패한 요청 재시도
        const originalRequest = error.config;
        originalRequest.headers.Authorization = `Bearer ${data.accessToken}`;
        return axios(originalRequest);
      } catch (refreshError) {
        // Refresh Token도 만료된 경우 로그아웃
       ...
      }
    }
    return Promise.reject(error);
  }
);

5. 서버는 권한 확인후 응답쿼리 헤더에 새로운 Access Token을 넣어 응답

6. Refresh Token도 만료시 서버는 401 에러 던짐, 클라는 다시 재로그인