前端开发-拦截器

拦截器是干啥的:

拦截器的作用主要是在axios请求和响应之前拦截他们

两种拦截器:

请求拦截:

一般会在请求头中添加token

响应拦截:

一般会处理异常错误信息

以及处理401 跳转登录页面

 

// 添加请求拦截器
axios.interceptors.request.use(
  function (config) {
    // 在发送请求之前做些什么
    // debugger
    //判断有没有token,如果有就在请求头添加
    if (localStorage.getItem("token")) {
      config.headers.Authorization = localStorage.getItem("token");
    }
    //config配置对象(请求报文):请求地址,请求方法,请求头,请求体
    return config;
  },
  function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  }
);

// 添加响应拦截器
axios.interceptors.response.use(
  function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么
    return response;
  },
  function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    //统一处理错误信息
    Toast.fail(error.response.data.message);
    //如果是401错误 就是没有token或者token过期了
    if (error.response.status === 401) {
      location.href = "./login.html";
    }
    return Promise.reject(error);
  }
);