vuejs里面怎么做权限管理控制？

Question

1.权限控制的参数都是后台返回到前端，数据如下：

那么我打算就是：如果没有这个权限，我会把相关的DOM remove()掉，结果用了个directive操作，代码如下：

那么问题来了，有些权限我要在公共组件里操作DOM，我不想这样，有没有什么好的办法或者好的建议？

这是一个公共组件checklist.vue

Answer 1

router的钩子函数可以加一道类似node中间件的概念：beforeEach

对应权限的拦截跳转是这样做的

对应节点可以用vuex来控制他的展示与否、后端也要加一重判断确保安全

Answer 2

不认同在before钩子里做菜单权限，这样是很简单，但可能带来两个问题：一、如果路由组件不是按需加载的话，应用将加载大量冗余代码；二、每次跳转都要遍历一次完整路由是对计算能力的浪费，对于路由总数较大的应用很不可取。

另一种思路是在Vue初始化之前拿到用户的菜单权限，根据权限筛选出实际可用路由，再初始化Vue，具体实现可以参考这里：Vue2.0用户权限控制解决方案

Answer 3

https://github.com/OneWayTech...

Answer 4

抛砖引玉，可以作为参考
https://github.com/Senzz/vue-...

Answer 5

我在做的过程中也是遇到了一些坑，把整个过程记录了一下，可以参考一下
https://github.com/JesseZhao1...