关于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" });
        });
    });
  }
),