Vue实战篇|使用路由管理用户权限(动态路由)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue实战篇|使用路由管理用户权限(动态路由)相关的知识,希望对你有一定的参考价值。

参考技术A 权限控制是后台管理系统比较常见的需求,如果我们需要对某些页面的添加权限控制的话,那我们可以在路由管理中的权限做一些校验,没有通过权限校验的给出相应的提示或者直接跳转到报错页面。

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

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

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

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

路由配置元信息meta: authority: ["admin"]

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

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

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

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

运行结果

当getCurrentAuthority()函数返回admin时,则菜单会显示所有元信息meta: authority: ["admin"] 的路由菜单;

如返回值为user时,菜单会显示所有元信息meta: authority: ["user"] 的路由菜单

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

以上是关于Vue实战篇|使用路由管理用户权限(动态路由)的主要内容,如果未能解决你的问题,请参考以下文章

vue-element-template实战 获取后端路由表动态生成权限

Vue实现动态路由

Vue权限控制——动态注册路由

Vue权限控制——动态注册路由

Vue 动态路由

vue前后分离动态路由和权限管理方案