Vue 3 配置 axios 拦截器

@/http/index.js

默认的validateStatus是200~300的为合法的状态码。

import axios from "axios";
import router from "@/router";

axios.defaults.baseURL = '/api/console';

axios.interceptors.request.use((config) => {
  let token = localStorage.getItem("token");
  if (token) {
    config.headers['Authorization'] = `Bearer ${token}`;
  }
  return config;
})

axios.interceptors.response.use((response) => {
  const { data } = response;
  return data;
}, (error) => {
  if (error.response.status === 401) {
    router.push({name: 'Login'});
    return Promise.resolve();
  }
  return Promise.reject(error);
})

export default axios;

interceptors

axios.interceptors.request：请求发送之前，会应用的拦截器。

axios.interceptors.response：请求返回之后，会应用的拦截器。

response会有一个error的处理方法，对于状态码非200/300的请求，会先进入error方法。