요청을 보낼때마다 AccessToken 을 넣어야 하는데…

😮 매번 api 을 작성할때마다 헤더 에서 토큰을 꺼내오고, 넣는 코드를 중복해서 작성했나요? 그럴 필요 없이 간단하게 매 요청에 토큰을 간편하게 삽입할수 있는법을 알려드릴게요❗

RequestInterceptor.ts

import axios from 'axios';

const axiosInstance = axios.create({
  baseURL: 'http://localhost:8081/api',
});

axiosInstance.interceptors.request.use(
  config => {
    const token = localStorage.getItem('accessToken'); // 알맞은 key 를 넣어주세요.
    if (token) {
			// 'Authorization'헤더에 value 로 토큰을 넣을거에요.
      config.headers.authorization = token;
    }
    return config;
  },
  error => {
    return Promise.reject(error);
  },
);

export default axiosInstance;

인터셉터 사용하기

💁🏻‍♀️ 간단하게 유저정보를 api 로 받아오는 곳에 사용해보겠습니다 ❗

UserApi.ts

import axiosInstance from './interceptor/RequestInterceptor.ts';
export const loginUserInfo = async () => {
  const response = await axiosInstance.post('/users/me');
  console.log(response.data);
  return response.data;
};

이제 이 api 를 컴포넌트에 적용해볼까요?

TheLogin.vue

로그인 컴포넌트의 부분을 발췌했습니다. 굵은 글씨로 표시해 둔 부분을 보면 대략적인 사용법이 이해가 가실거에요.

import { useAuthStore } from '../store/AuthStore.ts';
import router from '../router';
import { loginUserInfo } from '../api/UserApi.ts';

const email = ref('');
const password = ref('');
const authStore = useAuthStore();

const handleLogin = async () => {
  const userData = {
    email: email.value,
    password: password.value,
  };

  try {
    const response = await localLogin(userData);
    if (response.status == 200) {
      authStore.setLoginStatus(true);
      console.log(authStore.isLoggedIn);

      const userInfoResponse = await loginUserInfo();
      localStorage.setItem('userInfo', JSON.stringify(userInfoResponse));

      await router.push('/dash-board');
    }
  } catch (error) {
    console.log(error);
  }
};