vue axios 请求拦截，响应拦截

1.axios请求，响应拦截与处理

在新建vue项目后安装axios，然后在使用页面导入axios

新建一个http.js文件对请求响应做统一处理

/**
 * ajax请求配置
 */
import http from 'axios'
import {getToken} from "../assets/js/hzAuth";

// http默认配置
let http = axios.create({
  timeout: 10000,
});
// http request 拦截器
http.interceptors.request.use(config => {
    // config.headers['Content-Type'] = 'application/x-www-form-urlencoded;charset=UTF-8';
    //判断是否存在token，即判断用户是否登录，如果存在的话，则每个http header都加上ticket
    if (getToken()) {
      //每个http header都加上
      // console.log(getToken());
      config.headers['Authorization'] = getToken();
      //每个http header都加上personnelid
      if(sessionStorage.loginStaffInfo){
        config.headers.personnelid = sessionStorage.personnelid;
      }
    }
    return config;
  },
  error => {
    return Promise.reject(error.response);
  });

// http response 拦截器
http.interceptors.response.use(response => {
  // console.log(response)
    if (response.data.code==="404") {
      this.$router.push('login');
    }else{
      return response;
    }
  },
  error => {
    return Promise.reject(error.response);   // 返回接口返回的错误信息
  });

export default http;

request.use就是请求拦截， 

因为要做权限处理，所以请求时要带上后台返回的token用来验证

下面附带上hzAuth.js

/**
 * 鉴权js
 * 声明全局token键，用于存储token的值
 * @type {string}
 * 注意事项：确保key的唯一性
 * 有两种存储方式，1：Cookies，2：sessionStorage
 */
const hzTokenKey = 'hz-token';

/**
 * 登录成功后，设置token
 * @param token 服务端返回的token值
 */
export function setToken(token) {
  sessionStorage.setItem(hzTokenKey, token);
}

/**
 * main.js中全局拦截URL时获取token
 * @returns {string | null}
 */
export function getToken() {
  return sessionStorage.getItem(hzTokenKey);
}

/**
 * 退出登录时，调用remove函数移除token
 */
export function removeToken() {
  return sessionStorage.removeItem(hzTokenKey);
}

附带上axios源码 文档：axios

附上一同学的翻译版：https://www.cnblogs.com/xuqp/p/9760201.html