问题描述: 首先后端生成的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中的代码.
---------------------
作者:桐桐桐
来源:CSDN
原文:https://blog.csdn.net/qq_31679735/article/details/79590850
版权声明:本文为博主原创文章,转载请附上博文链接!

如何解决前后端token过期问题的更多相关文章

  1. Nginx完美解决前后端分离端口号不同导致的跨域问题

    笔者在做前后端分离系统时,出现了很多坑,比如前后端的url域名相同,但是端口号不同.例如前端页面为:http://127.0.0.1/ , 后端api根路径为 http://127.0.0.1:888 ...

  2. Django之使用中间件解决前后端同源策略问题

    问题描述 前端时间在公司的时候,要使用angular开发一个网站,因为angular很适合前后端分离,所以就做了一个简单的图书管理系统来模拟前后端分离. 但是在开发过程中遇见了同源策略的跨域问题,页面 ...

  3. 解决前后端调用,跨域二次请求Access-Control-Max-Age

    发现前后端分离的项目中,前端发起一个请求到后端,在Chrome浏览器下面debug的时候,Network下面看到同一个url有两条请求,url有两条请求,第一条请求的Method为OPTIONS,第二 ...

  4. 利用gulp解决前后端分离的header/footer引入问题

    在我们进行前后端完全分离的时候,有一个问题一直是挺头疼的,那就是公共header和footer的引入.在传统利用后端渲染的情况下,我们可以把header.footer写成两个单独的模板,然后用后端语言 ...

  5. 解决前后端分离的“两次请求”引出的Web服务器跨域请求访问问题的解决方案

    在前后端分离的项目中,前端和后端可能是在不同的服务器上,也可以是Docker上,那就意味着前端请求后端Restful接口时,存在跨域情况. 后端在做了通用的跨域资源共享CORS设置后,前端在做ajax ...

  6. mock的使用及取消,node模仿本地请求:为了解决前后端分离,用户后台没写完接口的情况下

    借鉴:https://www.jianshu.com/p/dd23a6547114 1.说到这里还有一种是配置node模拟本地请求 (1)node模拟本地请求: 补充一下 [1]首先在根目录下建一个d ...

  7. 解决前后端分离后的Cookie跨域问题

    一. 前端Ajax关键配置 $.ajax({ type: "post", url: xxx, data: xxx, contentType: 'application/json', ...

  8. php解决前后端验证字符串长度不一致

    前端代码 function getStrleng(str){ var myLen =0; for(var i=0;i<str.length;i++){ if(str.charCodeAt(i)& ...

  9. nginx配置反向代理解决前后端分离跨域问题

    摘自<AngularJS深度剖析与最佳实践>P132 nginx配置文件如下: server { listen ; server_name your.domain.name; locati ...

随机推荐

  1. 2018-2019 ACM-ICPC Southeastern European Regional Programming Contest (SEERC 2018) Solution

    A. Numbers Unsolved. B. Broken Watch Solved. 题意: 一个圆盘上,有等分的n块区域,有三根指针,当三根指针分别位于两块区域的交界处时 指针的三点相连会形成一 ...

  2. Django学习笔记之form组件的局部钩子和全局钩子

    本文通过注册页面的form组件,查看其中使用的全局钩子和局部钩子. # Create your views here. class RegForm(forms.Form): username = fo ...

  3. 20145118 《Java程序设计》 实验报告一

    实验一 JAVA开发环境的熟悉(LINUX + ECLIPSE) 实验内容 1.使用JDK编译.运行简单的Java程序: 2.使用Eclipse 编辑.编译.运行.调试Java程序. 3.统计自己的P ...

  4. 使用git一张图就够了

    现在,版本控制工具中,git逐步成为主流.他的分散式的特性是它超越svn渐渐独霸江湖.如果你还不熟悉git,通过本文,你有个最基本最实用的理解:如果你熟悉git,温故而知新,为你加深对git的理解 g ...

  5. 重器--biomart

    biomart 重器 biomaRt工具包的作用在于它可以轻松地完成的在多个生物学数据库上繁琐地检索,获取相关数据在不同数据库间的关联.

  6. $n,$!等的含义

    $$ Shell本身的PID(ProcessID)$! Shell最后运行的后台命令的PID$? 上一个运行的命令是否成功的标志,成功为0,失败不为0$* 所有参数列表.如"$*" ...

  7. C#使用(NamedPipe)命名管道通信的例子

    https://blog.csdn.net/yl2isoft/article/details/20228279

  8. Hive之基本操作

    1,CREATE table. CREATE [EXTERNAL] TABLE [IF NOT EXISTS] table_name [(col_name data_type [COMMENT col ...

  9. Tensorflow学习笔记二

    现在来开始安装Tensorflow吧 Tensorflow有两种模式, 一种GPU支持, 另外一种仅CPU支持 虚拟机仅有CPU支持, 那就第一种模式吧 有4种途径去安装 virtualenv &qu ...

  10. web漏洞扫描工具集合

    最好用的开源Web漏洞扫描工具梳理 链接:www.freebuf.com/articles/web/155209.html 赛门铁克2017年互联网安全威胁报告中提出在他们今年扫描的网站中,有76%都 ...