[Vue-DRF] JWT 로그인 시 토큰 갱신하기

https://velog.io/@mechauk418/Vue-DRF-%EB%A1%9C%EA%B7%B8%EC%9D%B8-%EA%B5%AC%ED%98%84%ED%95%98%EA%B8%B0

이전 포스팅에서 JWT 로그인에 대해 설명했다.

그런데 JWT에서 access token은 만료기간이 짧은 편이다.

만약 요청을 보냈는데 만료기간이 지났다면 해당 토큰을 먼저 갱신하고 새로운 토큰을 헤더에 담아서 새로운 요청을 보내야한다.

우선 토큰을 갱신하는 코드부터 작성해보자

# store/modules/refreshtoken.js

import axios from 'axios'
const axiosRefresh = axios.create()
const refreshtoken = {
  state: {
  },
  mutations: {
  },
  actions: {
    async refreshtt (dispatch, ReToken) {
      await axiosRefresh
        .post('토큰 갱신 URL', ReToken) // 토큰 갱신 URL로 ID, PW를 보냄
        .then((response) => {
          const newToken = response.data.access
          localStorage.setItem('access_token', newToken) 
        })
    }
  }
}
export default refreshtoken

프론트에서는 이렇게 작성해주었다.

그러면 백엔드에서는 토큰을 갱신시켜야한다.

DRF에서는 rest_framework_simplejwt 라이브러리를 활용하여 JWT 토큰을 갱신할 수 있다.

설치

pip install djangorestframework-simplejwt

세팅

# settings.py
INSTALLED_APPS = [
	...
    'rest_framework_simplejwt',
	...
]

REST_FRAMEWORK = {
    'DEFAULT_AUTHENTICATION_CLASSES': (
        'rest_framework_simplejwt.authentication.JWTAuthentication',
    )
}

from datetime import timedelta


SIMPLE_JWT = {
    "ACCESS_TOKEN_LIFETIME": timedelta(hours=2),  # access 토큰 만료 테스트를 하려면 2~3분으로 바꿀것
    "REFRESH_TOKEN_LIFETIME": timedelta(days=7),
    "ROTATE_REFRESH_TOKENS": False,
    "BLACKLIST_AFTER_ROTATION": True,
}

# urls.py
from django.urls import path, include
from rest_framework.routers import DefaultRouter
from . import views
from rest_framework.urlpatterns import format_suffix_patterns
from rest_framework_simplejwt.views import (
    TokenObtainPairView,
    TokenRefreshView,
)


router = DefaultRouter()
router.register('userlist', views.User_ViewSet)

urlpatterns =[
    path('', include(router.urls)),
    path('token/', TokenObtainPairView.as_view(), name='token_obtain_pair'),
    path('token/refresh/', TokenRefreshView.as_view(), name='token_refresh'),
]

여기까지 완료했다면 DRF 서버에 들어가보자

지정한 URL로 들어가면 토큰을 갱신시켜주는 api를 볼 수 있는데 여기에 refresh 토큰을 넣어주면 새로운 access 토큰을 뱉는다.

vue의 토큰 갱신 URL에 해당 api의 주소를 입력해주자.

그런데 문제는 이러한 토큰 갱신 과정을 모든 로그인이 필요한 axios에 넣어주는 것은 너무 코드가 복잡해진다.

그래서 axios 인스턴스를 활용한다.

로그인이 필요없는 axios 요청에는 기본 axios를 활용하고 로그인이 필요한 axios에는 내가 설정한 axios 요청을 보내는 것이다.

해당 방법에 대해서는 다음에 포스팅하겠다.