[Axios / Vue / Pinia] Axios를 사용할 때, JWT token 정보와 같이 요청하는 방법

Axios를 사용할 때, JWT token 정보와 같이 요청하는 방법

프로젝트를 진행하면서 Vue를 사용하게 되었는데, 이때 JWT를 사용하여 Spring으로 요청을 보내면서 토큰을 같이 보내야 했습니다. 그래서 요청 헤더에 토큰을 넣어서 보내야 하는 방법이 필요하게 되었습니다.

 

그래서 찾아본 결과 Vue의 Pinia를 통해서 토큰을 관리하고 요청을 보낼 때, 같이 보내는 방법을 사용하게 되었습니다.

🏷️ 사용 코드

import { defineStore } from "pinia";

export const useAuthStore = defineStore('auth', {
  state: () => ({
    token: localStorage.getItem('token') || '',
    userId: '',
  }),
  actions: {
    setToken(token) {
      this.token = token;
      localStorage.setItem('token', token);
    },
    clearToken() {
      this.token = '';
      localStorage.removeItem('token');
    },
  },
  getters: {
    isAuthenticated: (state) => !!state.token,
  }
});

위와 같이 Pinia를 통해서 토큰 정보를 state에 담아 놓습니다. 그리고 따로 설정파일을 만들어서 실제 사용 시 중복되는 부분을 줄여봤습니다.

import axios from "axios";
import { useAuthStore } from "../store/authStore";

const apiClient = axios.create({
  baseURL: '/api',
  headers: {
    'Content-Type': 'application/json',
  },
});

apiClient.interceptors.request.use(
  (config) => {
    const authStore = useAuthStore();
    const token = authStore.token;

    if (token) {
      config.headers.Authorization = `Bearer ${token}`;
    }

    return config;
  },

  (error) => Promise.reject(error)
);

export default apiClient;

헤더와 중복해서 사용하는 /api라는 부분을 미리 담아두고 interceptors를 통해서 요청을 보낼 때 중간에 가로채서 토큰을 부여하는데 JWT는 앞에 Bearer가 있어야 하므로 추가해서 헤더에 담아서 보내주어서 JWT오류 나는 부분을 해결했습니다.