關於vue項目的請求攔截器和響應攔截器

設置請求攔截器和響應攔截器

使用axios// 添加請求攔截器
每個請求體里加上token

axios.interceptors.request.use(
  function (config) {
    // 在發送請求之前做些什么
    return config;
  },
  function (error) {
    // 對請求錯誤做些什么
    return Promise.reject(error);
  }
);

// 添加響應攔截器
//服務器返回登錄狀態失效，需要重新登錄的時候，跳轉到登錄頁
axios.interceptors.response.use(
  function (response) {
    // 對響應數據做點什么
    return response;
  },
  function (error) {
    // 對響應錯誤做點什么
    return Promise.reject(error);
  }
);

在項目中使用的例子

axios.defaults.headers.post["Content-Type"] = "application/json"; //設置請求頭中的媒體類型信息
axios.defaults.baseURL = "http://192.168.2.7:30001/api/v1"; //設置請求不同域名的接口
//http request 請求攔截器，有token值則配置上token值
axios.interceptors.request.use((config) => {
  //在發送請求之前在請求頭中添加token;
  //在頁面登錄的時候先把token設置到sessionStorage(看需求,也可以放在localStorage或者cookie)里面;
  window.sessionStorage.setItem("token", res.data.accessToken);
  config.headers["Authorization"] =
    "Bearer " + window.sessionStorage.getItem("token");
  return config;
}),
  function (error) {
    return Promise.reject(error);
  };

攔截到401的錯誤之后,拿到之前登錄的時候存在sessionStorage里面的refreshToken,用於token過期以后調取刷新token,暫時只做了401的情況,還有很多情況還沒寫

// 響應攔截器
axios.interceptors.response.use(
  (response) => {
    const res = response.data;
    if (res) {
      return response;
    } else {
      return Promise.reject("error");
    }
  },
  (error) => {
    if (error.response.status != 401) {
      router.push({ path: "/login" });
      return;
    }
    //響應為401的情況
    var errorResp = error.response;
    let refreshToken = window.localStorage.getItem("refreshToken");
    if (!refreshToken) {
      router.push({ path: "/login" });
      return;
    }
    return new Promise((resolve, reject) => {
      axios({
        url: `/api/refreshtoken?refreshToken=${refreshToken}`,
        method: "post",
      })
        .then(({ data }) => {
          if (data.state) {
            window.localStorage.setItem("token", data.data);
            axios(errorResp.config)
              .then((retryRet) => {;
                resolve(retryRet);
              })
              .catch((err) => {
                reject("error");
              });
          } else {
            //如果刷新token業務級失敗,也返回登錄頁
            router.push({ path: "/login" });
          }
        })
        .catch((err) => {
          //如果刷新token執行失敗,則跳回登錄頁
          router.push({ path: "/login" });
        });
    });
  }
),