vue之axios 登陆验证及数据获取

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

 

转载于:https://www.cnblogs.com/wag-tail-118/p/8961479.html