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
注意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過來，因為比較安全！