如何解决前后端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中的代码.
---------------------
作者：桐桐桐
来源：CSDN
原文：https://blog.csdn.net/qq_31679735/article/details/79590850
版权声明：本文为博主原创文章，转载请附上博文链接！