vue之axios 登陆验证及数据获取
登陆验证,获取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 登陆验证及数据获取相关推荐
- vue中axios如何实现token验证
title: vue中axios如何实现token验证 date: 2018-02-08 17:50:07 tags: [axios,vue] 继上篇实现Auth认证之后,然后每个跳转页面都会在后端验 ...
- 借助axios的拦截器实现Vue.js中登陆状态校验的思路
在做Vue中的登陆校验时,思路应该是这样的:先确定一个路由页面是否需要登陆才能访问,如果需要,就需要用户登陆,如果不需要,用户直接可以访问. 那么,首先来说,后台系统中,不一定每一个页面都要进行登陆权 ...
- Vue实战-实现登陆页面
Vue实战-实现登陆页面 文章目录 Vue实战-实现登陆页面 1 前期准备 1.1 安装Node.js 1.2 安装webpack 1.3 安装vue-cli 2 搭建Vue项目 2.1 创建项目 2 ...
- vue中axios设置表单头_VUE项目axios请求头更改Content-Type操作
我就废话不多说了,大家还是直接看代码吧~ const httpServer = (opts, data) => { const token = localStorage.getItem('tok ...
- vue+elementUI完成登陆+注册
目录 1. vue怎么引入和配置使用element-ui框架 1.1 使用vue-cli脚手架工具创建一个vue项目 1.2 npm安装elementUI 1.3 在项目中src目录下找到main.j ...
- Vue之Axios AJAX封装
来源:我的博客站 OceanicKang |<Vue 之 Axios AJAX封装> 前言 才不要写前言,Axios 中文文档 https://www.kancloud.cn/yunye/ ...
- vue中axios封装请求
执行 GET 请求 // 向具有指定ID的用户发出请求 axios.get('/user?ID=12345') .then(function (res) {console.log(res); }) . ...
- 简单而不平凡-登陆验证
近来闲来无聊,随手写了一下登陆验证,挑选了两种比较方便的方式,奉献给大家 第一种 vue+localStorage router.beforeEach((to, from, next) => { ...
- vue + elementui + axios表单数据和文件上传
实现的功能: 1.表单数据提交, 2.表单中携带文件附件. 3.附件上传过程中进度提示. 前端使用:vue + elementui + axios 后端使用:springboot 介绍之前,先学习2个 ...
最新文章
- 打印零与奇偶数(多线程)
- adult道具项目开发 - 模式
- The podfile
- c语言程序设计语言描述,C语言程序设计题目描述(详).txt
- OpenSsl工具的介绍
- Mac或者Linux安装RabbitMQ
- 大华的支持rtmp推流吗_RTSP安防摄像机(海康大华宇视等)如何推送到RTMP流媒体服务器进行直播...
- 餐饮加盟推广遇到抖音下拉词框会碰撞出什么样的火花
- linux 下pycharm 无法输入中文
- Scrapy框架:Request和Response对象,使用Request发送get请求、FormRequest发送post请求
- idea无法使用mvn命令
- esp32摄像显示时间_ESP32彩屏显示入门:我要五彩斑斓的黑,还有五光十色的白
- ionic 配置java_ionic开发环境搭建
- 15.6寸键盘的详细介绍
- 技嘉主板前置面板没有声音的解决
- STM32超低功耗入门之唤醒
- Fuzzy kmeans
- 美通企业日报 | 内容质量是亚太媒体最重视的指标;“豆蔻青”将成2020年度色彩...
- 英特尔® 驱动程序和支持助理 (intel-driver-support-assistant) 安装后无法扫描电脑硬件驱动解决
- 简单粗暴上手TensorFlow 2.0,北大学霸力作,必须人手一册
热门文章
- python闭包的应用场景_简单谈谈Python中的闭包
- java weblogic 配置_java----weblogic部署应用
- 大根堆的删除c语言,大根堆和小根堆的C语言实现
- rto净化效率计算公式_全面剖析 石油化工行业RTO蓄热式焚烧炉的优势要素
- win8oracle10g安装报错,Win8电脑安装Oracle 10g提示程序异常终止的解决方法
- java jdbc连接db2数据库_Java连接db2数据库(常用数据库连接五)
- 453. 最小操作次数使数组元素相等
- 和可被 K 整除的子数组
- 《DBNotes:single_table访问方法、MRR多范围读取优化、索引合并》
- 【竞赛题解】第22次CCF计算机软件能力认证 B