建站
咨询
售后
建站咨询
vue-router中怎么实现权限控制，相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。
在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最开始就进行页面权限判断，也不会有加载越权数据的问题，况且数据权限是后端需要单独判断的，不应该让前端去担心。
看完上述内容，你们掌握vue-router中怎么实现权限控制的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！
另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。
新闻标题：vue-router中怎么实现权限控制-创新互联
转载来于：http://lswzjz.com/article/dcdcei.html
