Vue.js Jwt 인증 팁? 개인적인 정리

현재 Vue.js(Quasar framework 사용중)을 이용하여 웹개발을 진행중에있다.

Quasar framework 를 사용한 이유는 이전 게시글에도 썼지만, SSR(서버사이드 렌더링)을 위함과 Quasar Plugin 등을 사용하기 위해서 채택하게되었다.

 

Quasar를 사용하기 시작하였을때는 거의 초창기여서 많은 버그가있었으나 현재는 많이 안정화가 된듯하다. (거의 이틀에 한번 업데이트..)

 

본론으로 들어가서

현재 인증은 JWT 인증을 사용하고있다. JWT를 쿠키에 넣어서 인증에 사용하고있는데 SPA와 SSR을 혼용하고있기때문에 많은 실수가 있었다.

 

Axios

초반에는 각 파일마다(some.vue) axios를 import 해서 사용하였다.

참.. 멍청한 짓이였다. 아무래도 vue를 처음사용해봤을때고 하니..

 

아무튼 절때로 이런짓은 하면안되고..

 

찾아보니 Quasar Cookies 라고 퀘이사에서 자체적으로 cookie를 관리해주는 플러그인을 제공해주고있었다. 이게 좋은게 client, server 둘다 관리가 된다.

 

나는 axios.js라는 파일을 하나 만들고 quasar.conf.js 에 boot에 넣어서 초반에 불러와서 사용하고있다.

// quasar.conf.js

boot: [
...
    { path: "axios" }
]

// boot/axios.js

import { Cookies } from "quasar";
export default async({ app, store, router, ssrContext }) => {
	... write some code
}

저부분에서 쿠키를 불러와서 axios 헤더를 관리한다.

// boot/axios.js
import axios from "axios";
import { Cookies } from "quasar";

export default async({ app, store, router, ssrContext }) => {
    ...
    // 아래 코드로 클라이언트, 서버 둘다 쿠키를 관리가능
	const cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies;
    
    // 보통 axios와 jwt를 연동하기위해서는 axios interceptors 를 이용해야한다.
    axiosInstance.interceptors.request.use(config => {
    	let token = cookies.get("access_token")
        config.headers.Authorization = `Bearer ${token}`
        return config
    },function(error){
    	return Promise.reject(error)
    })
}

axiosInstance는 따로 let axiosInstance = axios.create() 로 선언해준것이다.

 

자 여기서 문제

interceptors 로 쿠키를 헤더에 넣는것까지는 해결했으나, 보통 jwt를 사용할때 access_token 은 만료가 되는데..

그럼 도대체 어디서 토큰갱신을 해줘야하는가?

 

// boot/axios.js
import axios from "axios";
import { Cookies } from "quasar";

export default async({ app, store, router, ssrContext }) => {
    ...
    // 아래 코드로 클라이언트, 서버 둘다 쿠키를 관리가능
	const cookies = process.env.SERVER ? Cookies.parseSSR(ssrContext) : Cookies;
    
    ...
    axiosInstance.interceptors.request.use
    ...
    
    // 만료는 request 가아닌, response 에서 관리를 해야한다.
    axiosInstance.interceptors.response.use(null, error => {
    	let status = error.response.status;
        // status code check
        if(status === 401){
        	// 여기서 만료시 갱신해주면된다!
            // getnewToken은 토큰만료를 체크하고, refresh_token을 이용해서 새로운 access_token을 반환해줌
            return getnewToken(refresh_token).then(token=>{
            	cookies.set("access_token",token)
                axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${token}`;
                
                // 여기서 재요청을 해주면 새로고침없이 바로 갱신과함께 새로운 데이터를 반환하게됨.
            })
        }
    })
}

뭐 위처럼 작성하면 새로운 갱신된 토큰이 들어갈것이다..

[코드를 일부러 빼두어서 저렇게 하면 작동안된다. 직접생각해보자]