登陆验证,获取token

methods:{callApi () {var vm = thisvm.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 = thisvm.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

vue之axios 登陆验证及数据获取相关推荐

  1. vue中axios如何实现token验证

    title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...

  2. 借助axios的拦截器实现Vue.js中登陆状态校验的思路

    在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问. 那么,首先来说,后台系统中,不一定每一个页面都要进行登陆权 ...

  3. Vue实战-实现登陆页面

    Vue实战-实现登陆页面 文章目录 Vue实战-实现登陆页面 1 前期准备 1.1 安装Node.js 1.2 安装webpack 1.3 安装vue-cli 2 搭建Vue项目 2.1 创建项目 2 ...

  4. vue中axios设置表单头_VUE项目axios请求头更改Content-Type操作

    我就废话不多说了,大家还是直接看代码吧~ const httpServer = (opts, data) => { const token = localStorage.getItem('tok ...

  5. vue+elementUI完成登陆+注册

    目录 1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 1.2 npm安装elementUI 1.3 在项目中src目录下找到main.j ...

  6. Vue之Axios AJAX封装

    来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言 才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...

  7. vue中axios封装请求

    执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...

  8. 简单而不平凡-登陆验证

    近来闲来无聊,随手写了一下登陆验证,挑选了两种比较方便的方式,奉献给大家 第一种 vue+localStorage router.beforeEach((to, from, next) => { ...

  9. vue + elementui + axios表单数据和文件上传

    实现的功能: 1.表单数据提交, 2.表单中携带文件附件. 3.附件上传过程中进度提示. 前端使用:vue + elementui + axios 后端使用:springboot 介绍之前,先学习2个 ...

最新文章

  1. 打印零与奇偶数(多线程)
  2. adult道具项目开发 - 模式
  3. The podfile
  4. c语言程序设计语言描述,C语言程序设计题目描述(详).txt
  5. OpenSsl工具的介绍
  6. Mac或者Linux安装RabbitMQ
  7. 大华的支持rtmp推流吗_RTSP安防摄像机(海康大华宇视等)如何推送到RTMP流媒体服务器进行直播...
  8. 餐饮加盟推广遇到抖音下拉词框会碰撞出什么样的火花
  9. linux 下pycharm 无法输入中文
  10. Scrapy框架:Request和Response对象,使用Request发送get请求、FormRequest发送post请求
  11. idea无法使用mvn命令
  12. esp32摄像显示时间_ESP32彩屏显示入门:我要五彩斑斓的黑,还有五光十色的白
  13. ionic 配置java_ionic开发环境搭建
  14. 15.6寸键盘的详细介绍
  15. 技嘉主板前置面板没有声音的解决
  16. STM32超低功耗入门之唤醒
  17. Fuzzy kmeans
  18. 美通企业日报 | 内容质量是亚太媒体最重视的指标;“豆蔻青”将成2020年度色彩...
  19. 英特尔® 驱动程序和支持助理 (intel-driver-support-assistant) 安装后无法扫描电脑硬件驱动解决
  20. 简单粗暴上手TensorFlow 2.0,北大学霸力作,必须人手一册

热门文章

  1. python闭包的应用场景_简单谈谈Python中的闭包
  2. java weblogic 配置_java----weblogic部署应用
  3. 大根堆的删除c语言,大根堆和小根堆的C语言实现
  4. rto净化效率计算公式_全面剖析 石油化工行业RTO蓄热式焚烧炉的优势要素
  5. win8oracle10g安装报错,Win8电脑安装Oracle 10g提示程序异常终止的解决方法
  6. java jdbc连接db2数据库_Java连接db2数据库(常用数据库连接五)
  7. 453. 最小操作次数使数组元素相等
  8. 和可被 K 整除的子数组
  9. 《DBNotes:single_table访问方法、MRR多范围读取优化、索引合并》
  10. 【竞赛题解】第22次CCF计算机软件能力认证 B