Vue实战篇｜使用路由管理客户权限（动态路由）

权限控制是后端管理系统比较常见的需求，假如我们需要对某些页面的增加权限控制的话，那我们可以在路由管理中的权限做少量校验，没有通过权限校验的给出相应的提醒或者者直接跳转到报错页面。

跟着我一起来学vue实战篇路由管理权限吧!

权限校验函数

getCurrentAuthority()函数用于获取当前客户权限，一般来源于后端数据

check()函数用于权限的校验匹配

isLogin()函数用于检验客户能否登录

路由配置元信息

路由配置元信息meta:{ authority: [“admin”] }

路由守卫router.beforeEach中判断

使用to.matched获取跳转路由的一律信息,包括父路由和子路由

使用lodash中的findLast匹配离跳转路由配置权限的元信息

引入auth.js中check()和isLogin()进行判断能否具备权限或者能否已登录

假如没有权限则给出提醒信息后跳转到403页面,未登录则返回登录页面

运行结果

当getCurrentAuthority()函数返回admin时，则菜单会显示所有元信息meta:{ authority: [“admin”] }的路由菜单；

如返回值为user时，菜单会显示所有元信息meta:{ authority: [“user”] }的路由菜单

以上就是我们权限控制中路由管理的一律内容，关注我获取”实战篇”源码！

接下来CrabFort会带大家一起实现更加精细化的权限设计（权限组件、权限指令）