版权声明：Dream_Lees Blog未经本人允许，不得转载 https://blog.csdn.net/qq_41846861/article/details/88853217

文章目录

• 一、为什么要设置请求头到token？
• 二、用法
• 显示

三、总结

一、为什么要设置请求头到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);
  // 异常处理
  })
  })
  }
  }

显示

成功如下图：

三、总结

• 网上很多方法，很多方法不可用，还是官网的方法比较靠谱。
• 推荐几个写的不错的参考链接：

https://www.cnblogs.com/yeqrblog/p/9850811.html
https://blog.csdn.net/qq_35430000/article/details/80108897

• 总之，就是记住这两个方法就好了，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);
});

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