vue应用的权限设计的思考

[JesseZhao1990]

权限的结构应该是一个树状结构，每个节点都有一个权限id，对于单页面应用来说，前端权限控制应该是从两个方面入手

• 1.根据用户拥有的权限id的集合决定用户能访问那些前端路由
• 2.根据用户拥有的权限id的集合决定用户能看到那些按钮或者模块。

第二条比较简单，可以写一个指令来决定按钮或者模块的显示与否，有坑的地方在第一条，起初的尝试是利用router.beforeEach来在每个路由加载前进行权限验证，如果有权限则进入，没有权限则到404页面，但是这样做在刷新的时候遇到了问题，由于用户的信息是存放在vuex中的，刷新的时候用户的权限信息为空，导致只要刷新就会到404页面，当然你可以把权限存放的浏览器的sessionStorage中，每次刷新并不会清空用户的权限信息，但是这样做的话，用户手动改一下sessionStorage就能看到相关的页面，确实不算是完美的方案。幸好在vue-router2.2之后的版本有个新的api叫addRouters，可以动态的添加路由。页面加载时的我们可以先初始化一个空路由，紧接着我们请求用户的权限信息，然后根本用户的权限信息筛选出来用户能访问的路由，然后利用addRouters添加到应用的路由中。完美的方案

[JesseZhao1990]

注意：当登录页在单页面之内时，并且登录页没有单独的路由时，按钮的权限过滤并不适合用指令，因为指令是依赖于指令所在的组件而生的，没法根据外部数据来决定指令所在的组件的有无。也就是说没法根据vuex中的数据来动态决定按钮的显示与否。当切换用户的时候，权限的list改变了，但是按钮并不会相应的更新，这时的最佳方法应该是把权限的鉴别功能封装成一个组件，而不是指令

[JesseZhao1990]

vue-router 提供了addRouters来进行添加路由，但是却没有移除路由的相关选项，当切换用户的时候，想要移除路由再添加怎么办呢？可以另外建一个router实例来替换之前的实例。

https://github.com/vuejs/vue-router/issues/1234

[JesseZhao1990]

贴一下鉴权组件的关键代码吧

鉴权组件的定义

鉴权组件的使用

[LonHon]

鉴权组件的方式个人觉得不优雅

权限的结构应该是一个树状结构，每个节点都有一个权限id

如果按文首所言设计， 带权限控制的按钮则可以写为如下，指令内部对鉴权，鉴权完成后对此element样式做出修改（隐藏or删除or保持）。

<button v-allowed="permission_id">删除</button>

---

没法根据外部数据来决定指令所在的组件的有无

这句话不赞同，闭包不就干这事的吗？

[chenyao1067915067]