需求
- 页面级别权限控制
1.URL路由权限控制
2.导航菜单权限控制
3.超链接权限控制 - 元素界别权限控制
1.按钮元素权限控制
2.其他页面元素权限控制
解决方案： - 静态路由注册表
1.URL路由权限控制 -> 通过路由导航守卫(全局前置守卫router.beforeEach((to, from, next) => {}); 全局后置钩子router.afterEach((to, from) => {}))
2.导航菜单权限控制
1.当用户登录时，携带用户信息去后台请求此用户有哪些权限(可以查看哪些页面，拥有哪些操作(增删改查))
2.根据API返回的权限信息和本地路由表对比合成生成最终的业务模块路由表
例如: 强调：API返回权限信息表和本地路由表中至少有一个字段唯一确定并且可以通过这个唯一标识使两个表中的元素一一对应
后台返回权限信息表['a', 'b', 'c']
本地路由表[{path: '/a', name: 'a', component: () => import(''), meta: {}}, {path: '/b', name: 'b', component: () => import(''), meta: {}}, {path: '/c', name: 'c', component: () => import(''), meta: {}}]
3.超链接权限控制
1.通过权限判断，此链接按钮是否在dom中存在或移除；切勿通过css display属性隐藏(弊端，用户可以通过修改css属性进行显示此按钮)
2.如果此超链接按钮显示了且跳转的路由不被允许，此时可以通过导航守卫拦截
4.按钮元素权限控制
1.通过给页面按钮元素添加唯一标识(IDCODE 唯一状态码)
2.页面渲染时根据后台返回的按钮元素级别的标识码做对比，看是否需要展示此按钮元素
5.其他页面元素权限控制请参阅第四条
