Axios拦截器封装

Axios拦截器封装

目录

• 请求拦截器
• 响应拦截器

完整代码：

import axios from "axios";
import { message } from "ant-design-vue";
import router from "../router";

axios.interceptors.request.use((config) => {
  const global = JSON.parse(localStorage.getItem("global") || "{}");
  // 每次请求前在header里面携带token
  config.headers["Authorization"] = global.token;
  return config;
});

axios.interceptors.response.use((response) => {

  // 登录失效
  if (response.data.code == 403) {
    router.push('/login')
  }

  /**
   * 约定好 code码 不为1000
   * 统一的报错
   */
  if (response.data.code !== 1000) {
    // 提示信息
    message.error(response.data.message);
    // 抛出错误 阻塞运行
    throw new Error(response.data.message);
  }

  // 同一结构出view想要的数据
  return response.data.data;
});

export default axios;

该模块包括请求拦截器和响应拦截器

请求拦截器

将获取到的token存入Authorization header：从 localStorage 中获取 global 对象，并从中读取 token。将这个 token 添加到每个请求的 headers 中，作为 Authorization 字段的值。这是为了确保每个请求都携带用户的身份验证令牌。

axios.interceptors.request.use((config) => {
  const global = JSON.parse(localStorage.getItem("global") || "{}");
  config.headers["Authorization"] = global.token;
  return config;
});

响应拦截器

拦截报错，阻塞运行，并结构数据

axios.interceptors.response.use((response) => {

  // 登录失效
  if (response.data.code == 403) {
    router.push('/login')
  }

  /**
   * 约定好 code码 不为1000
   * 统一的报错
   */
  if (response.data.code !== 1000) {
    // 提示信息
    message.error(response.data.message);
    // 抛出错误 阻塞运行
    throw new Error(response.data.message);
  }

  // 同一结构出view想要的数据
  return response.data.data;
});

export default axios;