一、为什么要设置请求头到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设置token到请求头

三、总结

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

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);
  });

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

秒客网

axios设置token到请求头

文章目录

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

二、用法

显示

三、总结

相关文章