前言
对于一个复杂的后台管理系统，权限管理的颗粒度有可能细化到按钮级别，之前的文章我们谈论过页面角色权限的控制[https://juejin.cn/post/7347616740852924466] ,本文我们将继续把颗粒度细化到按钮级别来展开讨论，来了解一下不同角色权限下是如何做按钮级别的权限控制的。页面按钮权限控制一般通过两种方法实现 （当前文章只讨论第一种方式，第二种方式会在后期文章中继续更新）：
- 如果系统角色是固定的，我们可以将按钮权限类似角色一样配置在
routes里面； - 通过动态添加路由的方法，即调用后端接口返回当前用户角色拥有的所有页面菜单信息，将菜单格式化成路由之后，再动态的添加到前端系统中，这种方式会更加灵活。
1. vue2 实现页面的角色权限按钮控制
将用户角色按钮事先配置在
routes里面
定义 routes
首先定义好系统的路由，在meta里面定义每个角色所拥有的按钮列表, 当前涉及到权限讨论的页面是 /about页面。这里我们给 admin master developer 等三个角色配置了不同的按钮权限。
import Home from "../components/Home.vue"const routes = [
{
path: ‘/’,
redirect: ‘/home’
},
{
path: “/home”,
name: “home”,
component: Home,
meta: {
needLogin: false, // 不需要登录
title: “首页”,
}
},
{
path: “/login”,
name: “login”,
component: () => import(/* webpackChunkName: “login” / “…/components/Login.vue”), // 路由懒加载
meta: {
needLogin: false, // 不需要登录
title: “登录”
}
},
{
path: “/about”,
name: “about”,
component: () => import(/ webpackChunkName: “about” / “…/components/About.vue”), // 路由懒加载
meta: {
needLogin: true, // 需要登录
title: “关于”,
roles: [‘admin’, ‘master’, ‘developer’], // 当前页面只有 admin 权限才能进入
btns: {
admin: [“add”, “delete”, “edit”, “select”], // admin 有增、删、改、查按钮
master: [“edit”, “select”], // master 有编辑、查看按钮
developer: [“select”], // developer 只有查看按钮
}
}
},
{
path: “/nopermission”, // 没权限就进入该页面
name: “NoPermission”,
component: () => import(/ webpackChunkName: “about” */ “…/components/NoPermission.vue”), // 路由懒加载
meta: {
needLogin: false, // 需要登录
title: “暂无权限”,
},
}
];
export default routes;
方案 1 : 直接通过v-if 指令控制按钮的隐藏和显示
主要思路：初始化当前页面时，先通过
store拿到缓存的userInfo信息（信息中包含有当前的登陆的用户的角色权限，比如admin权限）以及通过$route.meta获取配置的按钮权限信息btns。通过v-if 指令控制按钮的现实与隐藏。
关于 - about
1. 通过v-if 控制按钮权限
add delete edit select
方案 2 : 直接自定义指令实现按钮的权限控制
新建
btnAuth.js文件，实现自定义指令v-btnAuth,在自定义指令中通过在bind和update方法中获取传入的参数实现当前绑定的按钮的显示和隐藏。页面中的button 按钮中引入自定义的指令，并传入路由配置的按钮角色权限参数。
// 页面中 button 引入自定义指令
2. 自定义指令控制 directive
add
delete
edit
select