路由拦截器

九号窗口

已于 2022-04-06 17:40:12 修改

阅读量574

点赞数

分类专栏： vue 总结文章标签： javascript vue.js

于 2021-04-16 15:43:27 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_43734732/article/details/115763558

版权

总结同时被 2 个专栏收录

78 篇文章

订阅专栏

vue

47 篇文章

订阅专栏

该代码段展示了如何使用Axios库设置请求和响应拦截器来处理Token。在请求拦截器中，首先从Cookie获取Token，如果未找到则尝试获取Token，若获取失败则刷新页面。响应拦截器处理了状态码为200但无data.status的情况，并在数据请求失败且状态码不为0时处理Token过期情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import Cookies from 'js-cookie';
import axios from 'axios';
import { getToken } from './token';

// const { CancelToken } = axios;

// 初始化配置
const http = axios.create({
  baseURL: '/api',

});
// // 请求拦截器
http.interceptors.request.use(
  (config) => {
    const token = Cookies.get('token');

    if (config.token !== false && !token) {
      // let cancel;
      // const nextConfig = { ...config };
      // eslint-disable-next-line no-param-reassign
      // config.cancelToken = new CancelToken((c) => {
      //   cancel = c;
      // });
      // 缺少 Token，请求取消
      // cancel();
      // 预请求 token，绕过 iways 登录
      // getToken(http).then(() => http(nextConfig));

      getToken(http).then(() => window.location.reload());
    }

    // 注入 token
    // eslint-disable-next-line no-param-reassign
    config.headers.token = token;
    // config.headers.token = "token";

    // 注入请求数据
    // eslint-disable-next-line no-param-reassign
    config.data = { data: config.data };
    // 由于广本接口结构不统一，屏蔽掉这里

    return config;
  },
  (error) => Promise.reject(error),
);

// // 响应拦截器
http.interceptors.response.use(
  (response) => {
    let { status, data } = response;

    // 二进制流文件
    if (status === 200 && !data.status) return response;

    ({ status: { status }, data } = data);

    // 数据请求失败
    if (status !== 0) {
      // Token 过期重刷
      // eslint-disable-next-line prefer-promise-reject-errors
      return Promise.reject({ response: response.data.status });
    }

    // 成功并返回数据
    return data || {};
  },
  (error) => {
    // 因无 Token 而取消的请求不抛出错误
    if (axios.isCancel(error)) {
      return undefined;
    }

    if (error.response) {
      return Promise.reject(new Error(`Http ${error.message}`));
    }

    return Promise.reject(error);
  },
);

export default http;