如何解决前后端token过期问题

问题描述: 首先后端生成的token是有时限的,在一段时间后不管前端用户是否进行了访问后端的操作,后端的token都会过期,在拦截器阶段就会返回错误的请求:token过期,从而拿不到想要的请求数据.

解决思路: 每隔一段时间的后端请求中都将token传送过去获取新的token并返回前端放入cookies中并记录cookie的存储失控,达到更新cookie中token的效果;而长时间不做操作的话我们就可以让他的token失效退出系统了.

解决方式:我们的访问后端的请求都是jQuery的ajax请求.而这一类的ajax请求都可以通过$.ajaxSetup设置AJAX的全局默认设置。使用方法参考:http://www.runoob.com/jquery/ajax-ajaxsetup.html

现在说明一下我们使用了$.ajaxSetup的什么属性(先上一段伪代码):

$.ajaxSetup({
beforeSend:function(){
每次ajax请求前执行的操作;
}
},
complete:function(XMLHttpRequest,textStatus){

判断cookie中存储cookie的时间是否临近超时时刻了
如果临近的话发送刷新token的请求; 存储新的token并且记录当前时刻
}

});

说明:

beforeSend:(在每次ajax请求之前都会执行的部分.)

这里进行了cookie中token的校验,如果没有token我们就会重载页面,然后用户会跳转到登录页面,(这里说明用户已经长时间没有操作过了,前端的cookie已经失效,所以我们需要用户去重新登录).

complete:请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。

在请求完成后我们直接调用vue的ajax去访问刷新token的controlle得到新的token并且在前端重置token.这里最好不要用jQuery的ajax请求,因为会形成死循环一直调用刷新token的请求.虽然$.ajax请求中有一个global属性控制是否为请求触发全局 AJAX 事件处理程序.但是个人测试将global设置为false没有成功解决循环问题.所以用了vue的ajax请求.

而vue的ajax请求如何使用?请看main.js中的代码.

如何解决前后端token过期问题相关推荐

springmvc集成cas，并解决前后端分离情况
2019独角兽企业重金招聘Python工程师标准>>> 1.最近项目需要集成已经存在的cas系统. 但是目前已集成的系统都是jsp.而我们项目是前后端分离开发(伪),没有分开部署. ...
JWT（解决前后端分离和微服务的用户会话跟踪问题）
这里写目录标题 JWT:解决前后端分离和微服务的用户会话跟踪问题与传统sessio验证的区别: 基于 token 的鉴权机制 JWT的主要引用场景及优点 JWT的构成: JWT搭建案例: JWT: ...
解决前后端跨域问题No‘Access-Control-Allow-Origin‘...
实际工作中遇到了,在此做个笔记,希望能够帮助到遇到此问题的猿友们!!! 目录问题场景编辑此时作者后端代码为: 自定义过滤器: WebMvcConfig配置文件: 注入自定义过滤器解决方法 1. ...
5 分钟解决前后端联调问题，说一说前端代理这件事
简介: 简洁,又能触达痛点的一站式前端代理解决方案,你值得拥有. 作者:寒斜说到前端代理,相信每一个做过前后端联调的同学都有遇到过.当下涉及前后端工程项目的研发,主流模式一定是前后端的分离.它让前后 ...
Java接口long类型精度丢失,解决前后端交互Long类型精度丢失问题
雪花算法ID,对应的后端Long类型,前端number类型,它们的精度不一样,导致精度丢失现象雪花算法得到的ID较长,传到前端后,精度丢失库中:23754851322302474 后端:2375 ...
解决前后端交互Long类型精度丢失的问题
雪花算法ID,对应的后端Long类型,前端number类型,它们的精度不一样,导致精度丢失文章目录一.现象与分析 1.1. 现象 1.2. 分析二.解决方案 2.1. 方法一单个注解 2.2. ...
niginx反向代理解决前后端跨域问题
1.代理和跨域 1.1 正向代理 1)用户希望代理服务器帮助其和要访问服务器之间实现通信,需要: a.用户IP报文的目的IP=代理服务器IP: b.用户报文端口号=代理服务器监听端口号: c.HTTP ...
Vue整合nginx：（1）开发环境npm run dev下，通过nginx解决前后端分离造成的跨域问题
Vue整合nginx:(1)开发环境npm run dev下,通过nginx解决前后端分离造成的跨域问题参考文章: (1)Vue整合nginx:(1)开发环境npm run dev下,通过nginx ...
Nginx完美解决前后端分离端口号不同导致的跨域问题
Nginx完美解决前后端分离端口号不同导致的跨域问题参考文章: (1)Nginx完美解决前后端分离端口号不同导致的跨域问题 (2)https://www.cnblogs.com/PyKK2019/p ...

如何解决前后端token过期问题

如何解决前后端token过期问题相关推荐

最新文章

热门文章