【经典面试题】axios封装时请求拦截器跳转到登录页怎么实现？

axios拦截器（Interceptors）主要分为：

（1）请求拦截器：在发送请求前进行拦截，可以根据发送的请求参数做一些发送参数的调整，例如设置headers

（2）响应拦截器：在后台返回响应时进行拦截，可以根据状态码进入下一步处理。例如：登录失效跳转回登录页。

项目需求：根据后台返回的状态码，统一处理。例如：token失效，回到登录页面；返回错误，给出统一的错误提示。

代码演示

// 导入axios
import axios from "axios";
import { MessageBox } from "element-ui";
const querystring = require("querystring");
import ElementUI from "element-ui";
 
// 设置基地址-使用自定义配置新建一个 axios 实例
// 注意：打包时baseURL要加上api,即baseURL: "/api"
const http = axios.create({
  baseURL: "/",
  headers: { accessToken: localStorage.getItem("token") }
});
 
// 拦截响应response，并做一些错误处理
http.interceptors.response.use(
  response => {
    // 登录失效处理
    if (response.data.respCode == "00002") {
      MessageBox.alert(response.data.respDesc, "登录失效", {
        confirmButtonText: "跳转登录页面",
        callback: action => {
          // 跳转登录页
          window.location.href = "/";
        }
      });
    } else if (response.data.respCode != "00000") {
      if (response.data.respDesc != "") {
        ElementUI.Message({
          title: "错误",
          message: response.data.respDesc,
          type: "error"
        });
      }
    }
    return response;
  },
  error => {
    if (error.response.status == 401) {
      ElementUI.Message({
        title: "警告",
        message: error.response.data.respDesc,
        type: "warning"
      });
    }
    return Promise.reject(error);
  }
);
 
export default http;
//  ******一、登录******
// 登录请求
export const login = param => {
  return http.post("oauth/login/user", param, { headers: { accessToken: "" } });
};
// 退出登录
export const logout = () => {
  // 退出登录需要清除token
  return http.get("/oauth/logout", { headers: { accessToken: "" } });
};

引入说明:
axios ---- 必须要引入的
router ---- 路由跳转
MessageBox ------ ElementUI的一个提示框，不能直接就让用户跳转到登录页面，要有适当的提示，让用户有个心理准备，这里是对MessageBox的单独引用，如果需要其他的组件 可以在{ } 用逗号隔开进行添加