vue路由控制结合后端基于角色token校验的方案

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/m0_37774696/article/details/88785540

一、具体需求:

开发一套有学生、教务员、教师不同用户身份的系统,身份不同所拥有的权限资源也不同。要求用户必须登录,特定用户还需进行认证,才能拥有权限。采取了前后端分离的开发模式,主要使用技术栈:springboot web部分+vue(路由和axios部分)+token校验

二、详细步骤

第一步 在vue路由定义中多添加自定义字段requireAuth、role、auth:
在这里插入图片描述
第二步 设置登录拦截
用户登录成功获取的token将会被放置seesionStorge中,用于用户登录与否判断的依据,返回的role作为角色路由跳转依据 :
在这里插入图片描述
以上只是做了简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)还有一种情况便是:当前token失效了,但是token依然保存在本地。需要访问需要登录权限的路由时,实际上应该让用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。

第三步 拦截器 (为了统一处理所有http请求和响应,这里使用了 axios 的拦截器。)
每次跳页面,都要获取新路由对应的html页面, 这时候可以用axios的http拦截,每次路由跳转, 都先让后台验证一下token是否有效, 在http头添加token。当后端返回自定义失效状态码时,如果当前路由不为登陆页,则会跳转至登陆页要求用户重新登录:
在这里插入图片描述
后端用过滤器的方法,拦截并验证需要认证的请求是否含有合法的token:

在这里插入图片描述
token加密解密实现:
在这里插入图片描述
三、写在最后
以上是本人在实际项目过程中使用的一套权限校验方案。大家可以借鉴下,有疑问欢迎提问。

猜你喜欢

转载自blog.csdn.net/m0_37774696/article/details/88785540