vue---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: "" } });
};

參考文章：

GitHub Interceptors

vue.js項目中在axios響應攔截器中跳轉登錄頁面