关于路由权限校验的方法放在permission文件中
先放一波原理图
其实路由校验就是使用router守卫 router.beforeEach来对所有的路由进行拦截校验
先看前面先打开加载条 然后更改网页标题 之后获得token的值
有了token的值我们就可以进行下面的验证了
验证分为两步 当不存在时(也就是用户未登录时)以及token存在时(也就是用户登录以后)
一、token不存在时(用户未登录)
1.检测想要登陆的页面是否在白名单里面
如果在白名单里面 则调用next()直接访问
如果不在白名单里面 则重定向到‘/login’地址 将想要去的地址作为请求参数放到后面
对应情况:
没有登录的时候 想要访问白名单里面的地址 可以直接访问到 例如访问login
如果没有访问白名单内的地址 则会重定向到登录页面
二、当token存在的时候(用户登录以后)
首先判断想要访问的网址是不是‘/login’ 先说判断为否的情况
1.如果不是访问login
判断是否创建了用户 hasRoles为布尔值
如果创建了用户则生成用户权限范围内的页面 如果没有创建用户 则需要创建用户并且设置权限路由
创建用户
用store.dispatch调用store/modules/user.js下的getInfo方法 创建用户
然后创建该用户权限内的动态路由
将动态路由加入到router中
这样便生成了一个用户并创建了改用户相应权限内的路由 这样就会创建出符合用户身份的界面
这样如果 访问的时候如果有用户 那么肯定会有相应的路由
对应情况:
没有对象 对应的情况是刚登录的时候,用户刚刚登陆还没有创建用户对应的权限路由
有对象 对应的情况是 登录以后已经创建完用户 权限路由已经确定
2.如果访问‘/login’
则重定向到‘/’ 也就是重定向到主页 然后因为重定向了 所以就会再调用一次 router.beforeEach 然后就会按照没有访问login路线走了
对应情况: 如果登陆以后想要退回到登陆页面是不可以的 登陆以后再访问login地址就会定向到主页