美文网首页程序员
token的应用以及react项目中如何全局匹配token参数

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

作者: 废柴码农 | 来源:发表于2018-12-26 14:54 被阅读7次

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

    知乎用户名:废柴码农
    微博用户名:执拗病患者

    哈哈,交个朋友啦~

    相关文章

      网友评论

        本文标题:token的应用以及react项目中如何全局匹配token参数

        本文链接:https://www.haomeiwen.com/subject/pqphlqtx.html