element-ui-admin路由和权限的校验原理

关于路由权限校验的方法放在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地址就会定向到主页

你可能感兴趣的:(element-ui-admin路由和权限的校验原理)