Vue实现Hoc控制路由权限的方式

340 阅读1分钟


下面这个栗子: 分为user,admin,superadmin 三个权限

实现效果:user可以切换到about页面, admin和superadmin无法切换到about页面

github:github.com/LIAOTOW/per…

方案主要解决“异步获取角色和权限”的难点

大致思路是将页面通过HOC包装劫持渲染,异步获取角色之后,渲染对应权限的页面。

获取期间是空白内容(可以自定义)


方案:
  1. 路由用hoc分配权限, 动态加载模板组件

2. 角色信息放在vuex store中,保证可以处理异步角色权限

3. 角色放入localStorage中,只验证一次init