request.vue

import axios from 'axios';
import config from '@/config/url.config';
import { setItem, getItem } from '@/utils/storage';

const request = axios.create({
  baseURL: config.baseURL,
});

const whiteList = ['authorizations'];
**===请求拦截器===**
// 在请求拦截器里面，给所有的请求 设置一个功能的请求头 authorization； 就是一个令牌，就是一个身份的作用，因为http协议是没有状态，别人不知道我们有没有登录；
request.interceptors.request.use(
  function(config1) {
    // console.log('请求拦截器的打印：', config1);
    // config1.headers.Authorization = 'Bearer ' + getItem().token;
    // 在给所有请求添加token的时候，要做一个路由白名单的校验； 比如登录，注册，发验证码等请求，因为它们根本就没有进入系统，也就没有token；所以不需要发
    if (!whiteList.includes(config1.url) && getItem()) {
      // null.token
      config1.headers.Authorization = `Bearer ${getItem().token}`;
    }
    return config1;
  },
  function(error) {
    return Promise.reject(error);
  }
);

**===响应拦截器===**
request.interceptors.response.use(
  function(response) {
    // console.log('响应拦截器的打印：', response);
    return response.data;
  },
  function(error) {
    // 在这里我们要对别人的错误状态码进行判断， 来使用刷新token 解决token失效 也就是401的问题； 让别人在后台 看不见的地方，登录以失败，然后里面调用这里的请求，在获取最新的token值，然后重新设置到我们的 本地储存里面去
    console.dir(error);
    
    //===判断401就刷新token===
    if (
      error.response &&
      error.response.status === 401 &&
      error.response.statusText === 'UNAUTHORIZED'
    ) {
      if (getItem() && getItem().refresh_token) {
        axios({
          url: 'http://ttapi.research.itcast.cn/app/v1_0/authorizations',
          method: 'PUT',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            // Authorization: 'Bearer ' + getItem().refresh_token,
            // 如果不加bearer 空格 的话，就会报错 wrong token
            Authorization: `Bearer ${getItem().refresh_token}`,
          },
        }).then((res) => {
          console.log(111, res);
          setItem({
            token: res.data.data.token, // toekn值使用最新的
            refresh_token: getItem().refresh_token, // 刷新toekn还是使用以前的，
          });
          request(error);
        });
      }
    }
    return Promise.reject(error);
  }
);