登陆验证,获取token
methods:{
callApi () { var vm = this
vm.msg = ''
vm.result = '' //验证地址
vm.loginUrl= 'http://xxx/' //查询地址
vm.apiUrl = 'http://yyy/'
vm.loginModel= {
username: '你的用户名',
password: '你的密码', // grant_type: 'password', }
//先获取 token
axios.post(vm.loginUrl,vm.loginModel)
.then(function(res){
sessionStorage.setItem('accessToken', res.data.token) //显示token值 console.log(res.data.token);
})
.catch(function(err){
console.log(err);
});查询数据:
// 执行api 访问*/
axios.get(vm.apiUrl,{ //获取token ,拼装jwt后写入消息头 headers
//注意:jwt后面有个空格 ,jwt 是配合 django 的 rest_framework_jwt headers:{
Authorization:'JWT ' + sessionStorage.getItem('accessToken')
}
})
.then(function(res){ // 显示结果 console.log(res.data);
})
.catch(function(err){
console.log(err);
})完整代码:
<template>
<div id="SurveyForm">
<div >
<form id="transForm" v-on:submit="formSubmit">
<p>题目</p>
<h2> {{Title}}</h2><br><br>
请选择:<select v-model="Selected">
<option value="5">5</option>
<option value="4">4</option>
<option value="3">3</option>
<option value="2">2</option>
</select>
<input type="submit" value="提交">
</form>
<div class="container">
<div class="form-group">
<label></label>
<button @click="callApi">开始</button>
</div>
<div class="result">
API调用结果:{{ result | json }} </div>
</div>
</div>
</div>
</template>
<script>import axios from 'axios';
export default {
name: "SurveyForm",
data:function(){ return {
Title:"题目一",
Selected: "5"
}
},
result: '',
methods:{
callApi () { var vm = this
vm.msg = ''
vm.result = '' //验证地址
vm.loginUrl= 'http://xxx/api/auth/' //查询地址
vm.apiUrl = 'http://xxx/api/surveysn/'
vm.loginModel= {
username: 'xxx',
password: '***', // grant_type: 'password', }
//先获取 token
axios.post(vm.loginUrl,vm.loginModel)
.then(function(res){
sessionStorage.setItem('accessToken', res.data.token) //显示token值 console.log(res.data.token);
})
.catch(function(err){
console.log(err);
});
// 执行api 访问*/ axios.get(vm.apiUrl,{ //获取token ,拼装jwt后写入消息头 headers
//注意:jwt后面有个空格 ,jwt 是配合 django 的 rest_framework_jwt headers:{
Authorization:'JWT ' + sessionStorage.getItem('accessToken')
}
})
.then(function(res){ // 显示结果 console.log(res.data);
})
.catch(function(err){
console.log(err);
});
},
requestError: function(xhr, errorType, error) { this.msg = xhr.responseText
}
}
}</script>
最新回复 (0)