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

一、具体需求：

开发一套有学生、教务员、教师不同用户身份的系统，身份不同所拥有的权限资源也不同。要求用户必须登录，特定用户还需进行认证，才能拥有权限。采取了前后端分离的开发模式，主要使用技术栈：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加密解密实现：

三、写在最后
以上是本人在实际项目过程中使用的一套权限校验方案。大家可以借鉴下，有疑问欢迎提问。