一、为什么要设置请求头到token？

当输入用户名及密码，登录成功后，后台会返回一个token，在之后发送的请求都要带上这个token，因为后台设置了拦截，如果token一致，则允许访问，否则请求不成功。

二、用法

加一个http request拦截器 通过window.localStorage.getItem("accessToken") 来获取token的value 通过config.headers.accessToken = token;将token放到请求头发送给服务器，放在请求头中 // http request拦截器 添加一个请求拦截器 axios.interceptors.request.use(function (config) { // Do something before request is sent //window.localStorage.getItem("accessToken") 获取token的value let token = window.localStorage.getItem("accessToken") if (token) { //将token放到请求头发送给服务器,将tokenkey放在请求头中 config.headers.accessToken = token; //也可以这种写法 // config.headers[accessToken] = Token; return config; } }, function (error) { // Do something with request error return Promise.reject(error); }); 整体代码： import axios from axios import { Modal} from antd // http request拦截器 添加一个请求拦截器 axios.interceptors.request.use(function (config) { // Do something before request is sent let token = window.localStorage.getItem("accessToken") if (token) { config.headers.accessToken = token; //将token放到请求头发送给服务器 return config; //这里经常搭配token使用，将token值配置到tokenkey中，将tokenkey放在请求头中 // config.headers[accessToken] = Token; } }, function (error) { // Do something with request error return Promise.reject(error); }); // // 添加一个响应拦截器 // axios.interceptors.response.use(function (response) { // // Do something with response data // return response; // }, function (error) { // // Do something with response error // return Promise.reject(error); // }); //是我封装的axios.post请求方式 const baseApi = http://192.1.1.164:8080 export default class Axios { static ajax_post(url, params ) { return new Promise((resolve, reject) => { const URL = baseApi + url return axios.post(URL, params ).then(response => { resolve(response); return response.data }).catch(error => { reject(error); // 异常处理 }) }) } }

显示

成功如下图：

三、总结

总之，就是记住这两个方法就好了，axios 全局拦截器 （响应和请求）

// 添加一个请求拦截器
axios.interceptors.request.use(function (config) {
          
   
    // 在发送请求之前做些什么
    return config;
  }, function (error) {
          
   
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
          
   
    // 对响应数据做点什么
    return response;
  }, function (error) {
          
   
    // 对响应错误做点什么
    return Promise.reject(error);
  });

最后，一定要搞清思路，慢慢来。