之前写过一个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过来,因为比较安全!