登陆验证,获取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)