axios设置token到请求头

文章目录

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

显示

成功如下图:
axios设置token到请求头_第1张图片

三、总结

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

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);
  });
  • 最后,一定要搞清思路,慢慢来。

你可能感兴趣的:(随笔,已解决问题)