Summary

Axios통신을 할 때, URL 헤더에 유저의 토큰값을 넣어서 요청하는 것이 일반적이다. 서버에서는 넘어온 토큰정보를 기준으로 Api를 Request 한 유저가 해당 Api에 접근 권한이 있는지를 판단한다.

이때, 서버에 특정 Api를 요청하기 전 요청 URL에 항상 토큰값을 담아서 보내야 하고 이 작업은 서버통신을 할 때마다 반복되므로 인터셉터로 처리하자.

인터셉터(Interceptors)는 단어 뜻 그대로 '가로채서' 무언가를 처리할 때 사용한다. 서버통신에서는 요청 전 (가로채서)특정 로직을 수행하고, 응답 후 (가로채서) 특정 로직을 수행한다.

Goals

• Axio통신을 할 때, 로컬 스토리지의 id를 헤더에 담아 보낸다.
• 단, 어떤 API를 호출하든 현재 로그인 한 id가 헤더값에 포함되어야 한다.

Plan

1. Axios 전역 설정

// src/http/index.js
import axios from "axios";
import { interceptors } from "./interceptors";

const axios = axios.create({
	baseURL : "https://test.azurewebsites.net/"
})

export default axios

• baseURL을 설정하면 기본 URL를 매번 써주지 않고 axios.get('api주소')로 사용할 수 있다.
  서버통신을 호출하는 페이지에서 'src/http/index.js' 경로의 axios 를 import하고 사용하면 된다. (vue3기준)

• axios를 import하기 위해서는 package.json에 axios 라이브러리가 주입되어 있어야 하며, 프로젝트에 맞는 방법으로 설치하면 된다.
  나는 npm을 이용하여 설치했다. axios공식 라이브러리

npm install axios

참고
axios사용방법과 옵션에 관한 포스트

2. interceptors

// src/http//interceptors.js

import axios from 'axios'

axios.interceptors.request.use(
  (config) => {
    config.headers.Authrization = auth;
  },
  (error) => {
    // Do something with request error
    return Promise.reject(error);
  }
);

• me

3. axios 인스턴스에 헤더정보와 인터셉터를 연결한다.

// src/http/index.js

import axios from "axios";
import { interceptors } from "./interceptors";

const createdAxios = axios.create({
  baseURL: "https://hive-test2.azurewebsites.net/",
  headers : {
    Authrization : 
  },
});

const api = interceptors(createdAxios);

export default api;

• me