前后端分离项目——登录Token校验思路

Posted 2023-03-20

参考技术A

对token的校验分为前端和后端

前端： Vue-Cli 2.x + axios
后端：SpringBoot 2.3.4

这里的话，userToken和userId放到sessionStorage是关键步骤

后端主要是使用拦截器来进行请求的拦截和校验

解释一下思路：

这里的话，针对需要拦截的路径和需要放行的路径进行配置就行
关于redisTemple的引入这里就不再赘述。
到这里为止，前后端的token就都做完了，后面就再讲讲前端的一些其他思路吧
对于登录状态的判断，前端可以在router.foreach上对路由进行状态判定，从而实现页面程度的拦截（具体可以参考最后的参考文章2）

在使用拦截器后，会发现前端部分请求会无法正常到达后端，百度后发现是因为 axios发送正式请求前会先发送一个嗅探请求 ，而嗅探请求是不携带我们封装的header的，所以会导致部分请求会无法成功，解决的方式有很多种，这里的话是选择了在后端去直接处理

参考文章
1、SpringBoot加了拦截器后出现的跨域问题解析
https://blog.csdn.net/mrkorbin/article/details/104066979
2、Vue项目中实现用户登录及token验证
https://www.cnblogs.com/web-record/p/9876916.html