最近在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验证机制的更多相关文章

  1. token登录验证机制

    一张图解释 token登录验证机制

  2. Android之window机制token验证

    前言 很高兴遇见你~ 欢迎阅读我的文章 这篇文章讲解关于window token的问题,同时也是Context机制和Window机制这两篇文章的一个补充.如果你对Android的Window机制和Co ...

  3. 定制Asp.NET 5 MVC内建身份验证机制 - 基于自建SQL Server用户/角色数据表的表单身份验证

    背景 在需要进行表单认证的Asp.NET 5 MVC项目被创建后,往往需要根据项目的实际需求做一系列的工作对MVC 5内建的身份验证机制(Asp.NET Identity)进行扩展和定制: Asp.N ...

  4. 基于gin框架和jwt-go中间件实现小程序用户登陆和token验证

    本文核心内容是利用jwt-go中间件来开发golang webapi用户登陆模块的token下发和验证,小程序登陆功能只是一个切入点,这套逻辑同样适用于其他客户端的登陆处理. 小程序登陆逻辑 小程序的 ...

  5. 单页应用 - Token 验证

    单页应用 - Token 验证 转:https://juejin.im/post/58da720b570c350058ecd40f 第一次接触单页应用,记录公司项目关于Token验证知识. Token ...

  6. 简易 Token 验证的实现

    简易 Token 验证的实现 前言 在我们的服务器和客户端的交互中,由于我们的业务中使用 RESTful API 的形式和客户端交互,而 API 又是无状态的,无法帮助我们识别这一次和上一次的请求由谁 ...

  7. 基于jwt的token验证

    一.什么是JWT Json web token (JWT), 是为了在网络应用环境间传递声明而执行的一种基于JSON的开放标准((RFC 7519). 该token被设计为紧凑且安全的,特别适用于分布 ...

  8. c# asp.net 中使用token验证

    基于token的鉴权机制类似于http协议也是无状态的,它不需要在服务端去保留用户的认证信息或者会话信息.这就意味着基于token认证机制的应用不需要去考虑用户在哪一台服务器登录了,这就为应用的扩展提 ...

  9. TOKEN验证防止CSRF攻击的原理

    TOKEN验证防止CSRF攻击的原理.CSRF中文名是跨站请求伪造攻击,黑客可以通过CSRF攻击来伪造我们的身份,从而进行不法的活动.比如说是以我们的身份进行转账,发送邮件等操作. 要想做到预防CSR ...

随机推荐

  1. 【Sass初级】嵌套选择器规则

    在CSS中,我们都知道所有代码都在一个“根级别”的选择器中,每个CSS的样式声明都写嵌套的话,那意客味需要写很多的代码. 今天我要带领大家进入到Sass的最基本原则中.这就是所谓的“基础规则(Ince ...

  2. Luogu P1155 双栈排序 图论?模拟吧。。

    今天想做做图论,于是点开了这道题....(是二分图染色然而我没看出来) 四种操作及条件: 1. s1.push() 需满足 待push的元素小于栈顶 && { 若在原序列中,待push ...

  3. HDU6442(二项式)

    要点 懒得打公式了,题解 把题目要求的复杂公式化简成熟悉的东西,一是看穿前面加个\(n!\)化为\(C_n^i,i为奇数\):二是将奇数的条件去掉的数学技巧. 形为\({(a + b\sqrt{B}) ...

  4. ADC5513

    一 C5513 u32 ADC5513_GetValue(void){  u32 ADValue,i;  bool data_bit = false;   C5513_SCK=0;  C5513_CS ...

  5. Flask 学习系列(四)---Jinjia2 模板继承

    1.基模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

  6. zblog忘记后台密码怎么办 官方解决方案

    刚装的zblog还没开始研究,结果发现密码弄错了进不去后台,也是醉了 为节省时间,直接用官方方案,就是一个无密码进后台的文件.下载后把文件上传至网站根目录,然后直接访问后台修改密码 zblog密码找回 ...

  7. Ubuntu 配置IP地址方法

    接到一客户的服务器,开机已启动发现是Ubuntu系统,当时有点郁闷了,心想没有配置过ubuntu系统,这客户还在旁边了,心里有点紧张了,于是开始上网寻找各种方法配置,最终将IP配置好,给客户上架调试通 ...

  8. ios uilabel 根据文字 计算宽度 高度

    //根据宽度求高度        + (CGFloat)getLabelHeightWithText:(NSString *)text width:(CGFloat)width font: (CGFl ...

  9. wpf ListBox删除选择项(支持多项)

    搞了个ListBox删除选择项,开始老是不能把选择项删除干净,剩下几个.后来调试一下原来是ListBox在删除一个选择项之后立即更新,选择项也有变化.结果我想了个这样的方法来删除呵呵. Departm ...

  10. HDU 5459 Jesus Is Here (递推,组合数学)

    有点麻烦的递推,递推的原则:向小的问题方向分解,注意边界. 字符串的递推式为 定义f为Si中的总方案数 首先可以得到 fi=fi-1+fi-2+组合(si-2,si-1) 然后考虑Si-2和Si-1之 ...