Vue中axios的请求拦截器和响应拦截器

在src/utils/request.js中

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

const request = axios.create({
  baseURL: "/user",
  timeout: 20000,
})

// 请求拦截器
request.interceptors.request.use(
  (config) => {
    const tokenStr = sessionStorage.getItem("token");
    if (tokenStr) {
      config.headers.token = tokenStr;
    }
    return config; // 返回这个配置对象，如果没有返回，这个请求就不会发送出去
  },
  (error) => {
    return Promise.reject(error);
  }
)

// 响应拦截器
request.interceptors.response.use(
  (res) => {
    // 根据后端的状态码查看是否token过期，10016和10017代表token过期或失效
    if (res.data.status === 10016 || res.data.status === 10017) {
      // 如果token过期或失效 则移除token
      window.sessionStorage.removeItem('token')
      // token过期则跳转到登录页面
      // 注意这里使用router.replace防止用户回退
      router.replace({
        path: '/login'
      })
    }
    // 这里做了数据脱壳，因为我们想要的数据都在res.data中没有必要把整个res返回
    return res.data
  }
)

export default request;