token验证机制
最近在vue-cli项目实现登录的过程中用到了token验证,在此总结如下
1. 登录时,客户端通过用户名与密码请求登录
2. 服务端收到请求去验证用户名与密码
3. 验证通过,服务端会签发一个Token,再把这个Token以响应发给客户端.
4. 客户端收到Token,存储到本地,如Cookie,SessionStorage,LocalStorage.我们是存在cookie
5. 客户端每次像服务器请求API接口时候,都要带上Token.
6. 客户端每次跳转路由的时候也要验证Token登录态
7. 服务端收到请求,验证Token,如果通过就返回数据,否则提示报错信息.
第一步:通过用户名+密码获取token,存cookie
axios.post(this.Service.SERVER.login, {
username: this.ruleForm.username,
password: this.ruleForm.password
})
.then((res) => {
if(res.token) {
this.xes.setCookies('token', res.token, 2)
this.$router.push({name: 'approveOnline'})
}
})
第二步:路由跳转进行登录态校验
首先先比较一下下面两段代码
router.beforeEach((to, from, next) => {
let isLogin = xes.getCookies('token')
if(!isLogin) {
// 如果是登录页面路径,就直接跳下一步
next('/login');
}else{
next()
}
})
router.beforeEach((to, from, next) => {
let isLogin = xes.getCookies('token')
if(!isLogin) {
// 如果是登录页面路径,就直接跳下一步
if(to.path=='/login'){
next();
}else {
next('/login');
}
}else{
next()
}
})
结果:第一段代码在页面进行路由跳转的时候会陷入死循环
原因:next后面带路径跳转时会重新调用router.beforeEach,next后不加参数跳转时不会执行beforeEach
第三步:axios请求拦截器配置token,校验请求时的登录态
axios.interceptors.request.use((config) => {
// 以防cookie失效,所以每次发请求都重新获取token
if(xes.getCookies('token')) {
config.headers.common['Authorization'] = 'Token ' + xes.getCookies('token');
}
return config
}, (error) => {
Message.error({
message: '加载超时'
})
return Promise.reject(error)
})
此处遇到的坑:
axios请求头部token的设置——因为axios.defaults.headers设置只在页面初始化的时候获取一次,会导致在页面发起请求的时候不会重新去获取登陆态,这样就出现个问题,不论是否处于登陆态,已登陆的状态会一直存在,为了避免这个问题,就需要在请求内部去设置获取token,于是把携带token的头部设置放在axios的请求拦截器里,每次请求都重新获取以便拿到最新的登陆态,这里有个坑就是在请求拦截器里设置头部要用自定义设置,而不能用axios.defaults.headers默认设置,因为默认设置是优先于请求拦截器执行的,假如用了默认设置,其实设置的是下一次请求的请求头而非本次请求(token是在axios.defaults.headers中携带的)
第四步:axios响应拦截器更新cookie
axios.interceptors.response.use((res) => {
var _url = res.config.url.replace(axios.defaults.baseURL, '')
if (res.data.stat == 1) {
xes.setCookies('token', xes.getCookies('token'), 2)
}
return res.data
}
这样做是考虑到用户体验,防止用户在使用系统过程中由于cookie到期而中断退出系统
总结
因为本次开发后端只是根据前端调接口时是否传token来判断是否登录,并未进行登录校验,所以考虑的点比较多。考虑不周请指正
原文地址:https://segmentfault.com/a/1190000016814541
token验证机制的更多相关文章
- token登录验证机制
一张图解释 token登录验证机制
- Android之window机制token验证
前言 很高兴遇见你~ 欢迎阅读我的文章 这篇文章讲解关于window token的问题,同时也是Context机制和Window机制这两篇文章的一个补充.如果你对Android的Window机制和Co ...
- 定制Asp.NET 5 MVC内建身份验证机制 - 基于自建SQL Server用户/角色数据表的表单身份验证
背景 在需要进行表单认证的Asp.NET 5 MVC项目被创建后,往往需要根据项目的实际需求做一系列的工作对MVC 5内建的身份验证机制(Asp.NET Identity)进行扩展和定制: Asp.N ...
- 基于gin框架和jwt-go中间件实现小程序用户登陆和token验证
本文核心内容是利用jwt-go中间件来开发golang webapi用户登陆模块的token下发和验证,小程序登陆功能只是一个切入点,这套逻辑同样适用于其他客户端的登陆处理. 小程序登陆逻辑 小程序的 ...
- 单页应用 - Token 验证
单页应用 - Token 验证 转:https://juejin.im/post/58da720b570c350058ecd40f 第一次接触单页应用,记录公司项目关于Token验证知识. Token ...
- 简易 Token 验证的实现
简易 Token 验证的实现 前言 在我们的服务器和客户端的交互中,由于我们的业务中使用 RESTful API 的形式和客户端交互,而 API 又是无状态的,无法帮助我们识别这一次和上一次的请求由谁 ...
- 基于jwt的token验证
一.什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519). 该token被设计为紧凑且安全的,特别适用于分布 ...
- c# asp.net 中使用token验证
基于token的鉴权机制类似于http协议也是无状态的,它不需要在服务端去保留用户的认证信息或者会话信息.这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了,这就为应用的扩展提 ...
- TOKEN验证防止CSRF攻击的原理
TOKEN验证防止CSRF攻击的原理.CSRF中文名是跨站请求伪造攻击,黑客可以通过CSRF攻击来伪造我们的身份,从而进行不法的活动.比如说是以我们的身份进行转账,发送邮件等操作. 要想做到预防CSR ...
随机推荐
- 【Sass初级】嵌套选择器规则
在CSS中,我们都知道所有代码都在一个“根级别”的选择器中,每个CSS的样式声明都写嵌套的话,那意客味需要写很多的代码. 今天我要带领大家进入到Sass的最基本原则中.这就是所谓的“基础规则(Ince ...
- Luogu P1155 双栈排序 图论?模拟吧。。
今天想做做图论,于是点开了这道题....(是二分图染色然而我没看出来) 四种操作及条件: 1. s1.push() 需满足 待push的元素小于栈顶 && { 若在原序列中,待push ...
- HDU6442(二项式)
要点 懒得打公式了,题解 把题目要求的复杂公式化简成熟悉的东西,一是看穿前面加个\(n!\)化为\(C_n^i,i为奇数\):二是将奇数的条件去掉的数学技巧. 形为\({(a + b\sqrt{B}) ...
- ADC5513
一 C5513 u32 ADC5513_GetValue(void){ u32 ADValue,i; bool data_bit = false; C5513_SCK=0; C5513_CS ...
- Flask 学习系列(四)---Jinjia2 模板继承
1.基模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- zblog忘记后台密码怎么办 官方解决方案
刚装的zblog还没开始研究,结果发现密码弄错了进不去后台,也是醉了 为节省时间,直接用官方方案,就是一个无密码进后台的文件.下载后把文件上传至网站根目录,然后直接访问后台修改密码 zblog密码找回 ...
- Ubuntu 配置IP地址方法
接到一客户的服务器,开机已启动发现是Ubuntu系统,当时有点郁闷了,心想没有配置过ubuntu系统,这客户还在旁边了,心里有点紧张了,于是开始上网寻找各种方法配置,最终将IP配置好,给客户上架调试通 ...
- ios uilabel 根据文字 计算宽度 高度
//根据宽度求高度 + (CGFloat)getLabelHeightWithText:(NSString *)text width:(CGFloat)width font: (CGFl ...
- wpf ListBox删除选择项(支持多项)
搞了个ListBox删除选择项,开始老是不能把选择项删除干净,剩下几个.后来调试一下原来是ListBox在删除一个选择项之后立即更新,选择项也有变化.结果我想了个这样的方法来删除呵呵. Departm ...
- HDU 5459 Jesus Is Here (递推,组合数学)
有点麻烦的递推,递推的原则:向小的问题方向分解,注意边界. 字符串的递推式为 定义f为Si中的总方案数 首先可以得到 fi=fi-1+fi-2+组合(si-2,si-1) 然后考虑Si-2和Si-1之 ...