react-native axios token和jquery ajax token组件交互教程用法和心得笔记

之前写过一个react axios 交互的简单笔记，公司其他项目需要加入验证服务器，作为一个小白，便于翻看代码回忆，也是方便有需求的web开发参考，下面内容可能写的不好，也不一定很符合您的需求，不过大体的意思就是这样，存在一些问题，错误之处还请指出，大家理解万岁。如果想看看更多的axios的笔记可以去我的react-axios笔记去学习，今天这个主要说token。

验证服务器：oauth2

简而言之就是一个口令（token...类似...天王盖地虎，宝塔镇河妖..........借用了我们架构师的原话）

用一段axios-post来获取token吧！

axios.post(`${url}/connect/token`,`client_id=client2&client_secret=secret&username=${username}&password=${password}&grant_type=password`)

.then(res=>this.loginok(res))

.catch(err=>this.loginerr(err))

client_id

client_secret

grant_type

这三者参数问问后台就知道了，默认好的。

获取token后，后面的每次交互都需要它进行验证，所以一定要在参数里面带着它。

注意1************************************************************************************************

其实我们知道axios post方法默认content-type使用application/json，那么传递到后台的将是序列化后的json字符串。但是上面的client_id=client2&client_secret=secret&username=${username}&password=${password}&grant_type=password的数据我并没有写成json格式或者是json对象格式，这是因为我们的后台oauth2在接收数据时格式采用的是application/x-www-form-urlencoded，这样上传到后台的数据是以key-value形式进行组织的并且用&来分割，所以为了方便后台接受我直接才写成了client_id=client2&client_secret=secret&username=${username}&password=${password}&grant_type=password

注意2************************************************************************************************

既然我们知道axios post方法默认content-type使用application/json，我们也可以直接修改content-type格式就好了，下面开始进行如何修改content-type！在你的项目里面安装 npm intstall qs 然后将其import qs from 'qs'。在修改headers，我们就获取到了

      let username='jialin';
      let password='jialin123L';
      let data={
        client_id:'client2',
        client_secret:'secret',
        username:username,
        password:password,
        grant_type:'password'
      }
    axios.post(`${url}/connect/token`,qs.stringify(data),{headers: {
     'Content-Type': 'application/x-www-form-urlencoded'
   }})
      .then(res=>console.log(res))
      .catch(err=>console.log(err))

来一个axios-post（有 token data参数）

axios.post(`${url}/api/Account/ChangePassword`,{id:this.props.loginid,password:this.state.usernewpassword},
        {
          headers:{
            Authorization: `${ this.props.token_type } ${ this.props.access_token }`
          }
        })
.then((res)=>{Alert.alert('提示',res.data.message,
                        [
                          {text: '知道了'}
                        ]
                        );})
.catch((err)=>{console.log(err.response);})

来一个axios-get（无data参数）

let access_token=this.state.access_token;
let token_type=this.state.token_type;
    axios.get(`${url}/api/account/userinfo`,
    {
      headers:{
        Authorization: `${ res.data.token_type } ${ res.data.access_token }`
      }
    })

来一个axios-get（有 token data参数）

 axios.get(`${url}/api/view/showdata?begin=${begin}&end=${end}`,
      {
         headers:{
         Authorization: `${ this.props.token_type } ${ this.props.access_token }`
      }
  })

以上是axios使用，下面我们用原生ajax-post获取token

var username="jialin";
var pass="jialin123L";
     $.ajax({
     type:'post',
      dataType:'json',
      contentType:'application/x-www-form-urlencoded',
      data:{
       client_id:"client2",
       client_secret:"secret",
       username:username,
       password:pass,
       grant_type:"password"
      },
      url:'l:'${url}/connect/token',
      beforeSend:function(XHR){
           console.log(XHR);
      },
      success:function(res){
             console.log(res);
       },
       complete:function(XHR){
                    
       },
      error:function(err){
             console.log(err(err)
      }
                
 })

注意3************************************************************************************************

其实还是原生ajax好，方，便！直接修改contenttype，一点脾气没有

************************************************************************************************

来一个ajax-get（无data参数）

$.ajax({
     type:"get",
     dataType:'json',
     url:"${url}/api/account/userinfo",
     headers:{
         Authorization:token_type+' '+access_token
     },
      success:function(res){
          console.log(res)
      },
     error:function(err){
         console.log(err);
      }
    });

来一个ajax-get（有token data参数）

                   $.ajax({
                    type:"get",
                    dataType:'json',
                    contenType:'application/json',
                    data:JSON.stringify({
                        begin:begin,
                        end:end
                    }),
                    url:"${url}/api/view/showdata",
                    headers:{
                        Authorization:token_type+' '+access_token
                    },
                    success:function(res){
                        console.log(res)
                    },
                    error:function(err){
                        console.log(err);
                    }
                });

来一个ajax-post（有token data参数）

$.ajax({
                type:"post",
                dataType:"json",
                contentType:"application/json",
                data:{
                    name:'jialin',
                    userName:'jialin',
                    employeeNumber:'110',
                    phoneNo:'12345678987'
                },
                headers:{
                    Authorization:token_type+' '+access_token
                },
                url:"url/api/account/resetpassword",
                async:false,
                success:function(datadata){
                    console.log(datadata);
                },
                error:function(errorerror){
                }
            });

来一个ajax-post（有token 无data参数）

算了，这个案例就不写了...

有的人会疑问，用get来获取token怎么样，其实绝大多数token都是post过来，因为比较安全！