在vue中使用后台提供 的token验证方式总结及使用方法
token是相对会叫安全的使用暗码形式的数据传输,由后台产生,并且传输到前台,前台可以将保存,在前台每次发送请求的时候可以携带token,后台可以对token进行验证,通过验证的通过请求可以对数据进行正确的回复,否则就睡返回错误的回执码
token有自己的过期时限,并且是在后台实现,前台虚无考虑那么多,具体前台的步骤分为三部
1.在登陆的时候后台会给一个token码,前台将其存储在cookie,localstroage或者localsession中即可
请注意需要在tooken的前边拼接字符串'Bearer '+,固定格式
login(){
axios.post('/user/login',this.user).then((res)=>{
localStorage.setItem('token',"Bearer "+res.data.res.token)
})
}
2.在router中设置守卫导航
判断token是否存在,如果存在将携带token进行下一簇的操作,如果不存在,则返回登陆
router.beforeEach((to,from,next)=>{
if(to.matched.some((route)=>route.meta.Auth)){
if(localStorage.getItem('token')){
next()
}else{
next({
path:'/login',
query:{
returnURL:to.path
}
})
} }else{
next()
} })
3.在axios的请求拦截器中携带tooken进行请求
axios.interceptors.request.use(config=>{
const token=localStorage.getItem('token')
// if(token){
token?config.headers.Authorization=token:null; // }
return config
});
每次请求时都会携带token,后台验证不验证token就是后台的问题了
设置token的回复拦截器,对回执码错误的进行操作处理
axios.interceptors.response.use(res=>{
if(res.data.res_code=== 401){
router.replace('/login');
localStorage.removeItem('token')
}
return res
})
这个根据后台的回执码自行更改就行
在vue中使用后台提供 的token验证方式总结及使用方法的更多相关文章
- 在Vue中由后台数据循环生成多选框CheckBox时的注意事项
多选框是一种非常常见的功能,有时候我们会根据后台返回的数据进行多选框渲染,之前做项目时遇到循环生成多选框时,v-model绑定的值会随着选中与取消改变,但页面却不会变化 的情况,后来测试了一下,发现多 ...
- koa2+mysql+vue实现用户注册、登录、token验证
说明: node.js提供接口,vue展现页面,前后端分离,出于编辑器功能和编辑习惯,vue用HbuilderX,node.js用VScode.(PS:仅作为学习笔记,如有不当之处欢迎指出,在此先谢为 ...
- asp.net中常用的几种身份验证方式
转载:http://www.cnblogs.com/dinglang/archive/2012/06/03/2532664.html 前言 在B/S系统开发中,经常需要使用"身份验证&q ...
- OAuth2.0和企业内部统一登录,token验证方式,OAuth2.0的 Authorization code grant 和 Implicit grant区别
统一登录是个很多应用系统都要考虑的问题,多个项目的话最好前期进行统一设计,否则后面改造兼容很麻烦: cas认证的方式:新公司都是老项目,用的是cas认证的方式,比较重而且依赖较多,winform的项目 ...
- vue中实现后台管理路由标签页
<template> <section> <div class="navTabList el-tabs__nav-scroll" id="t ...
- Vue项目中实现用户登录及token验证
学习博客:https://www.cnblogs.com/web-record/p/9876916.html
- vue中axios配置代理的俩种方式及优缺点
概述:Axios 是一个基于 promise 的 HTTP 库,可以用在浏览器和 node.js 中 当我们使用vue向服务器发送AJAX请求时,我们会遇到跨域问题,一般跨域的解决方案有俩种,一种是官 ...
- 在Vue中输入框自动获取焦点的三种方式
原生JS操作DOM使用mounted钩子函数,它表示页面一加载进来就执行函数里面的内容(和window.onload类似)1//html部分 编号:<input type="text& ...
- Angular4中使用后台去数据,Swiper不能滑动的解决方法(一)
Swiper是目前较为流行的移动端触摸滑动插件,因为其简单好用易上手,很受很多设计师的欢迎. 今天在使用Swiper的时候遇到这个问题: 使用angularjs动态循环生成swiper-slide ...
随机推荐
- 【php 之获得当前日期以及比较日期大小】
首先看一个例子: $currentTime = date('Y-m-d H:i'); // 获得当前时间 $timer = $searchDated . ' ' . $results['ctrip'] ...
- 自学之jQuery
最近在公司做项目的过程中,涉及到写前端部分,因为之前一直很少写前端,所以不是很熟悉,所以,在此写一下自学jQuery的过程,以及中途遇到的坑. 首先,要想使用jQuery必须先引入jQuery < ...
- dUMP:A new value is to be assigned to the field "<L_BOX>"
DUMP: A new value is to be assigned to the field "<L_BOX>", although this field is e ...
- 关于AndroidStudio的打包数字签名以及多渠道发布
AndroidStudio右侧Gradle里边的build(工程下的)是可以生成未签名的debug和release的apk包生成前可以先clean一下工程 app下的build.gradle里边的 l ...
- /usr/local/ 和 /opt
/usr/local:用户级的程序目录,可以理解为C:/Progrem Files/.用户自己编译的软件默认会安装到这个目录下. /opt:用户级的程序目录,可以理解为D:/Software,opt有 ...
- mongodb导入csv结构化数据
csv数据样本 "103238704","","-jmyuncker@aol.com-","-r4Vp5iL2VbM=-" ...
- Numpy 索引
1.一维索引 >>> import numpy as np >>> A = np.arange(3,15) >>> print(A[3]) 6 & ...
- SD-WAN介绍
SD-WAN SD-WAN特性 相关技术 Hybrid WAN WAN Optimization WAN edge router MPLS NFV SDN SD-WAN厂商 SD-WAN SD-WAN ...
- gcd(欧几里得算法)
基础 int gcd(int a,int b) { int r; ) { r=a%b; a=b; ...
- Porsche PIWIS III with V37.250.020 Piwis 3 Software Update New Feature
Porsche Piwis tester 3 PT3G VCI with V37.250.020 Piwis 3 Software unlimited license installed on Ful ...