axios设置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);
  });

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