流浪のwolf

卷帝

导航

DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'function (header, parser) { header = normalizeHeader(header);

场景:token过期,然后更新了token 重新发起请求获取数据 ;

代码:使用上一次的错误请求配置报错     return request(error.config) ;

解决 :

 return request({
          ...error.config,
          headers: {},
        });
// 添加响应拦截器
request.interceptors.response.use(
  function (response) {
    // console.log({ response });
    // 对响应数据做点什么
    console.log("响应拦截器成功的");
    console.log("token没有过期");
    console.log(response);
    return response;
  },
  async function (error) {
    // 错误原因:1. 没有登录本地没有存储token 2. token过期了 (注意是token 不是refresh_token过期了)
    // 对响应错误做点什么 token 过期或者没有携带token
    /**
     * 
    第一次是每次请求都会携带本地的短token,
    如果某一次出错即是短token失效,
    第二次那个401是你请求使用长token刷新短token的错误代码;
     */
    console.log("响应拦截器失败的");
    console.log(error.config);
    if (error.response && error.response.status === 401) {
      //   console.log("token过期了,跳转到登录页面");
      //   router.push("/login");
      //   出现 401 错误 则说明短token过期了 需要执行刷新token逻辑
      const user = store.state.user; // 从 vuex == 本地获取 user
      // 如果本地没有token存储就去登录页面,没有token就是没有登录 不存在过期问题
      if (!user) {
        console.log("没有登录,本地没有token,直接去登录页面");
        return router.push("/login");
      }
      // 有token 说明已经登录了 可能是登录token过期问题 我们就刷新token
      // 可以把本地的token 或者 refresh_token修改然后测试token过期问题
      try {
        // 发起更换token的请求 参数是 refresh_token
        console.log("发起更换token的请求");
        console.log("token过期了");
        // await refreshTokenApi(user.refresh_token) ;  // 坑 !!! 不能使用 rquest 实例发起请求 因为在请求拦截器统一了token(使用的是token) 但是我封装的更新tokne接口使用的是 refresh_token 故我们要使用干净的 axios 去发起请求
        const { data } = await axios({
          url: "http://toutiao.itheima.net/v1_0/authorizations",
          method: "put",
          // 设置请求头
          headers: {
            Authorization: `Bearer ${user.refresh_token}`,
          },
        });
        // 把返回的新token 保存起来
        store.commit("setUserToken", {
          token: data.data.token,
          refresh_token: user.refresh_token,
        });
        // 继续上一次的出错请求(因为token导致的) 请求userInfo数据出错了
        // 然后我更新了token 重新发起请求 请求 userInfo 数据
        // return request(error.config) // 把之前的错误配置项传入传入即可 现在的配置项是正确的 (因为token更新了)
        // return request(error.config); // 这句是错误的 因为 axios 更新升级了 之前的配置项的请求头如果在就不做调整了(不在修改了)
        // console.log({
        //   ...error.config,
        //   headers: {},
        // });
        // ... 剩余参数在对象里面的使用
        // console.log({ ...{ type: "get" }, name: "zlx" });
        // {type: 'get', name: 'zlx'}
        // return request({
        //   ...error.config,
        //   headers: {},
        // });
      } catch (err) {
        // 原因 : 这里出错了说明我的更新token报错了 说明是长token(就是refresh_token )过期了
        // ps:此项目的token过期时间 2 小时 refresh_token 过期时间 15 天
        if (error.response && error.response.status === 401) {
          console.log("refresh_token过期了 重新登录");
          return router.push("/login");
        } else {
          // 或者其它网络错误
          console.log("Promise.reject(err)是个啥");
          return Promise.reject(err);
        }
      }
    }
    return Promise.reject(error);
  }
);

 

posted on 2022-10-20 17:06  流浪のwolf  阅读(1088)  评论(0编辑  收藏  举报