[JavaScript知识库]权限管理整个流程

涉及到权限管理的模块

用户管理?: 账号的增删改查以外,为该账号分配角色

角色管理:角色的增删改查,为该角色分配权限数据

权限管理:需要进行权限管理的页面进行增删改查

权限管理分三部分

1.api

主要是后端处理

前端:响应拦截里做统一错误处理

2.路由

2.1将路由分为二大块

静态路由:不需要访问权限的路由(登录页,404,首页)

动态路由:需要权限访问的路由

默认只有静态路由

2.2在获取到用户信息后

1.用户信息中包含当前用户能访问的权限页面的数据

2.通过和动态路由匹配出能访问的页面的路由信息

3.通过addRoutes动态添加到路由上,此时会出现一些坑点:

坑点一:刚添加的路由不能立马使用需要再经过一次导航守卫

解决方式:next(to.fullPath)

坑点二:404问题（刚添加的不能立马使用，如果静态路由中包含*匹配404，就会直接跳转到404）

解决方式:将静态路由中的404匹配删掉,通过addRoutes添加到最后

坑点三:打印this.$router,注意options里面routes还是只有三条信息,并没有因为addRoutes添加而更新,原因是options不是一个响应式数据,默认第一次读取是什么就是什么

解决方式:vuex是响应式的,如果所有的路由配置信息都在vuex中读取,问题解决,创建一个vuex模块管理所有路由配置,与当前路由配置保持一致,所以引入constantRoutes

坑点四:完成分配什么权限可以看到什么页面,切换账号后也确实只能看到当前账号可以看到的页面,但是在地址栏切换不可以看的地址,任然可以进入该地址页面,刷新之后又进入404了.

原因:上一个账号可以访问的页面里有这个地址

解决方式:每次退出登录都重置路由

3.按钮

通过自定义指令当用户信息的按钮权限信息包含当前按钮标识时正常显示,不包含就不显示