一、具体需求:
开发一套有学生、教务员、教师不同用户身份的系统,身份不同所拥有的权限资源也不同。要求用户必须登录,特定用户还需进行认证,才能拥有权限。采取了前后端分离的开发模式,主要使用技术栈:springboot web部分+vue(路由和axios部分)+token校验
二、详细步骤
第一步 在vue路由定义中多添加自定义字段requireAuth、role、auth:
第二步 设置登录拦截
用户登录成功获取的token将会被放置seesionStorge中,用于用户登录与否判断的依据,返回的role作为角色路由跳转依据 :
以上只是做了简单的前端路由控制,并不能真正阻止用户访问需要登录权限的路由。(可手动在浏览器地址栏输入没有权限的路由)还有一种情况便是:当前token失效了,但是token依然保存在本地。需要访问需要登录权限的路由时,实际上应该让用户重新登录。这时候就需要结合 http 拦截器 + 后端接口返回的http 状态码来判断。
第三步 拦截器 (为了统一处理所有http请求和响应,这里使用了 axios 的拦截器。)
每次跳页面,都要获取新路由对应的html页面, 这时