原文地址:http://blog.kantli.com/article/42
2018-12-21更新:
这个方法事实上是有后遗症的。在子页面F5强制刷新时,传入的用户权限会被清空,导致用户权限不足被导到404页面;解决的方法是在刷新前后钩子函数中保存权限数据到localStorage再读取,并不是很优雅,但是很简单。
当然,强制刷新本来就不是vue的预期行为,更新数据自动更新组件,还要F5做什么?所以也可以选择不处理这个问题,尤其是针对内部用户,我们又很不要脸的时候 -_-!!!
在vue-router控制前端权限是常见需求:
有一种做法是直接在后端完成判断,提供页面列表和操作列表,在前端进行渲染,但这个方案并不优雅,前后端耦合度比较高。
比较常见的做法是把登录页面独立在router之外,专门写一个权限控制文件,在登录之后根据用户权限加载router,之后把权限作为参数传入各种组件中,以控制元素的渲染。这个方法比较合理,没有什么额外的开销,只是需要独立写一个登录页面和权限控制文件比较麻烦一些,特别是对一些小项目而言。
我们希望还有更简单的方式。这个时候梳理一下需求,我们的主要目标是:
菜单栏控制,根据权限渲染可以进入的页面菜单;
操作按钮权限控制,没有操作权限的不予显示;
如果有人通过直接点击链接或输入地址进入没有权限的页面,则进行拦截;
第一、第二个目标是容易实现的,把权限列表传入对应组件,通过v-if判断即可,需要解决的是越权页面的拦截问题。在上面常见的做法中,为了实现拦截,单独写了一个登录页面,登录之后再根据权限加载路由,这样,没有权限的路由根本不会加载,于是被导向404页面。
那么,现在的问题是,怎么样会有更简单的方式?
显然,如果我们不想单独写login页面,那么router在登录前就完成加载了。如果无法通过router自动将越权页面导向404页面,我们能做的,只能手动引导了。思路清楚了,实现起来就毫无压力:
- 根据vue组件的生命周期,我们可以在mounted钩子上进行权限判断,如果通过props传入的用户权限列表没有对应权限,就跳转页面到404:
mounted () {
if (!this.check_user_privilege (current_page)) {
this.$Message.error('权限不足');
this.$router.push('404');
}
}
- 当然,事实上vue-router也提供了页面跳转时的钩子方法,全局的有beforeEach、afterEach等,我们希望直接在组件内使用,则可以使用beforeRouteEnter方法,在进入页面时进行判断,比如:
beforeRouteEnter (to, from, next) {
next(vm => {
if (!vm.check_user_privilege (current_page)) {
vm.$Message.error('权限不足');
vm.$router.push('404');
}
})
},
具体可以参考[文档]。
当然,就这个例子来说,用vue-router提供的钩子还不如直接在mounted写判断条件,因为beforeRouteEnter方法中的next需要调用组件参数,是在mounted执行之后才执行的,而我们又经常需要在mounted钩子加载页面数据,为了避免浪费,先进行判断是比较好的。
和常用方法相比,简单方法是有额外开销的,主要在于需要完全加载路由,同时在加载页面后进行了一次判断。不过从写代码的角度来说,似乎逻辑上更节约,因为不用另外写一个集中进行权限控制的文件了,至于每个页面的权限判断,那是本来在菜单栏就要做的事情,延伸到不同页面也不算什么负担。
会不会有什么副作用呢?暂时来看似乎是没有的,如果在mounted最开始就进行页面权限判断,也不会有加载越权数据的问题,况且数据权限是后端需要单独判断的,不应该让前端去担心。