前端实现权限控制 - 三种方法 - 不同的角色有不同的路由映射

有代码：https://gitee.com/zhu-longxu/zhulx-rbac

ps：注意本地路由 router 有哪些规则？服务器返回的数据格式？

 

方法一：本地路由router 包含静态路由规则 ； 虽然动态路由规则定义了但是没有注入；动态路由规则在登录判断的时候选择性是否注入 ；服务器返回数据格式 [  "news", "cate", "adv","product"   ]，角色不同返回的数据不同 ；  [  "news", "cate" ]  等 ；

 

方法二：本地路由router 实例 只注入了静态规则 constRouter  ，动态路由 asyncRouter 没有定义 ；服务器返回的数据格式是动态路由规则 ；

方法一：addRouter 给特定的动态规则注入到路由实例 router 

 

 

 页面显示说明：

 

 

 代码逻辑：

 

 

 

 

 

 方法二：服务器返回角色对应全部动态路由规则  只要在登录的时候把 component替换成对应的组件

返回的数据格式：

 

 ps：每个角色返回不同的动态路由规则 ； 然后再登录的时候把component的字符串使用 map （数据处理） 换成组件 ；

 

 方法三：本地路由包含全部的静态和动态路由规则 ；登录的时候使用前置路由守卫 ；i服务器返回角色权限标识 ；