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

本文介绍了一种在前后端分离的系统中,利用Vue路由、axios和token校验实现用户权限控制的方案。通过在路由定义中添加自定义字段,设置登录拦截,并结合http拦截器,确保用户登录且token有效才能访问特定资源。同时,后端通过过滤器验证请求的合法性,实现细致的角色权限管理。
摘要由CSDN通过智能技术生成

一、具体需求:

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

二、详细步骤

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

第三步 拦截器 (为了统一处理所有http请求和响应,这里使用了 axios 的拦截器。)
每次跳页面,都要获取新路由对应的html页面, 这时

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值