react 将token充入_token的应用以及react项目中如何全局匹配token参数

接口对接实质：

1、登录成功php生成token储存到数据库表中，

2、返回到前端页面储存cookie的值‘token’

3、axios提交头部信息，头部信息的值用token

4、后台PHP接收头部信息，接收到了获取用户id

在做登录页面的时候后台会返回一个token的值，此时前端拿到token值之后要储存在本地存储中，之后再第一时间拿到的值中做全局配置，具体代码如下：

var storage=window.localStorage;//在react组件之外定义一个变量为本地存储//请求接口的方法 userOnLine=()=>{

axios

.post("/safemgmt/api/admin/login",{

username:this.state.userName,

password:this.state.password,

})

.then(res=>{

if(res.data.code==="0"){

window.location.href="#/admin/home"//点击之后跳转到的组件 }

storage=res.data.result.token;//这块是从后台获取到的token值赋值给storage //--------------------下面这块获取全局缓存然后全局加入token参数------------------------ axios.interceptors.request.use(function (config) {

config.withCredentials = true

config.headers = {

token:storage

}

return config;

}, function (error) {

return Promise.reject(error);

})

})

}

}

匹配完之后，如果请求后台的格式不统一(比如有的时候可以是json格式有的时候是form格式)，这种情况下可能会出现一个问题，form格式的请求后台发现参数由冒号变成了等号,(axios传给后台多了一个等号)如果在post请求中加入headers,发现不起作用，因为上面全局headers覆盖掉了。(如下)

//错误代码import axios from 'axios';

let baseURL='http://192.168.1.1:8000/user/login';

axios.post(

baseURL，

qs.stringify({id:41}), //qs.stringify是将json转化为string格式 {headers: {'Content-Type': 'application/x-www-form-urlencoded'}}

//这种格式的是form表单格式，).then(result => {

// 代码}

正确代码：去掉 qs.stringify和headers，并且和后台协调，让后台把请求格式变为统一：如都统一为json格式

//正确代码import axios from 'axios';

let baseURL='http://192.168.1.1:8000/user/login';

axios.post(baseURL，{id:41}, //去掉qs.stringify).then(result => {

// 代码}

PS:本人只是一枚废柴小码农，在实战中积累经验，只是将所踩过的坑分享出来给遇到同样坑的小伙伴们提个醒，可能会少走些弯路。如果能帮助到你解决实际问题，我将更加坚定分享的初衷：一起成长。 目前只在知乎上和简书上更新文章，准备在这两个地方持续更新文章，您的关注对我可能是莫大的鼓励。

简书用户名：废柴码农

微博用户名：有温度的壁纸

哈哈，交个朋友啦~