背景：平常所接触到的系统权限控制，大部分都是菜单、路由级别的控制，但后台管理系统中，很多操作都是与职责和角色挂钩的，同样一个列表，不同人的操作列并不都一样，有些页面存在一些含有重要数据的组件，也会进行相应的权限控制，仅让领导层能看到。

        按钮级权限：根据用户的权限不同，对不同的按钮进行权限控制，对同一组数据，不同的用户是否可以增删改查。对某些用户来说是只读浏览数据，对某些用户来说是可编辑的数据。除了按钮，比如页面中的某个字段，某个div，某个组件要求根据当前用户的权限进行控制时，都可以称为按钮级权限。

     因此，有必要实现按钮/组件级别的权限控制，为了更加方便高效地使用更细粒度的权限控制，封装了一个自定义指令插件v-permission，可实现随时注入使用。

v-permission插件

        一个基于Vue3进行封装的自定义指令，在这个插件中，你可以检查传入的系统权限列表和用户拥有的权限列表，来确定用户是否具有某个组件/按钮级别的权限，实现更细粒度的权限控制。

功能：

① 指令：有权限时显示 UI，无权限时不渲染。避免出现用户看得见按钮，点击却无反应或出现无权限提示，这种不友好的使用体验。

②方法：可用于一些前置处理，比如进入页面时，根据是否有权限来判断默认渲染哪个组件作为该用户能看到的首页。

方式一：封装成可下载的npm包

        在公司中，为了减少重复劳动，防止重复造轮子，开发的这种通用插件是直接传到npm上，再下载到项目中使用的，于是笔者将该插件单独写在一个很简单的小项目中，具体可见：

         该插件的源代码及其使用文档均放在该仓库中。

GitHub - yoguoer/v-permissionContribute to yoguoer/v-permission development by creating an account on GitHub.https://github.com/yoguoer/v-permission.git

方式二：在项目中直接封装插件

        当然啦，我们也可以直接在项目中去实现这个插件，下面介绍一下操作步骤。

        1. 在根目录下新建一个directive文件夹，用来存放我们自己开发的所有插件。为了便于区分，我们再建一个vPermission文件夹，用来存放我们的v-permission插件。

        2. 在directive/vPermission/permission.ts文件写入以下内容：

/**
* 权限指令
* 使用： v-permission="{module:'模块名称',auth:'权限key值'}"
* const hasPermi = hasPermissions({ module: 'someModule', auth: 'someAuth' });
*//**  * 初始化全局权限判断方法  * permissionList 系统预先配置的权限列表，包含所有权限信息* permissions 用户当前权限列表(服务端返回接口权限列表数据) */
export function initHasPermission(options: {permissionList: Array<string> | null,permissions: Array<string> | null
}
) {const { permissionList = null, permissions = null } = options;// 返回一个函数，该函数接收一个权限对象并返回是否有权限    return (permission: {module: string,auth: string,}) => {if (!permissionList || !permissions) {throw new Error('permissionList or permissions is null');}if (permission.module && permission.auth) {const value = permissionList[permission.module][permission.auth];return permissions.includes(value);}return false;};
}// 检查权限并执行相应的操作  
function checkPermission(el: any, binding: any, hasPermissions: Function) {if (typeof binding.value === 'object' && binding.value.module && binding.value.auth) {if (!hasPermissions(binding.value)) {el.style.display = 'none';} else {el.style.display = ''; // 如果有权限，确保元素可见  }}
}// 权限指令  
// 创建一个返回指令对象的函数，该函数接受 hasPermissions 函数作为参数  
export default function createPermissionDirective(hasPermissions: Function) {return {mounted(el: any, binding: any) {checkPermission(el, binding, hasPermissions);},updated(el: any, binding: any) {checkPermission(el, binding, hasPermissions);}};
}

        3. 在directive/vPermission/index.ts文件写入以下内容：

import createPermissionDirective from './permission';
import { initHasPermission } from './permission'// Vue 3 插件定义   
const install = function (app: any, options: {permissionList: Array<string> | null,permissions: Array<string> | null
} = {/** permissionList 系统预先配置的权限列表，包含所有权限信息*   permissions 用户当前权限列表(服务端返回接口权限列表数据) */permissionList: null,permissions: null}) {// 初始化权限检查函数 const hasPermissions = initHasPermission(options);// 添加全局方法 $hasPermissions  app.config.globalProperties.$hasPermissions = hasPermissions;// 提供全局的权限检查对象 app.provide('hasPermissions', app.config.globalProperties.$hasPermissions);// 使用 hasPermissions 函数创建指令对象  const permissionDirective = createPermissionDirective(hasPermissions);// 注册全局指令 v-permission  app.directive('permission', permissionDirective);}// 导出插件对象  
export default {install
};

插件使用方法

• 在你的项目根目录中新建一个permission文件夹，并在文件夹下新建一个index.ts文件和一个modules文件夹。

modules文件夹用来放置不同模块的权限控制文件（一般各个模块各自建一个.ts文件），而index.ts用来遍历读取modules下的所有文件，并将所有文件转换为键值对的形式，整合成一个包含系统所有权限信息的对象，即：{ 模块名：{ 该模块的权限列表 }, ... }。

• 在index.ts文件中键入以下代码：

/*** 权限配置模块文件，统一引入所有权限配置文件*/
const files = import.meta.glob('./modules/*.ts');
const modules = {};
for (const path in files) {files[path]().then((mod) => {let fileNameMatch = path.match(/([^\/\\]+?)\.\w+$/);let fileName = fileNameMatch ? fileNameMatch[1] : null;modules[fileName as string] = mod?.default});
}export default modules

• 在modules下新建所需要的模块文件，文件中的内容格式形如以下例子（权限key值: 权限标识）：

export default {add: '/add-add',delete: '/delete-delete', edit: '/edit-edit', 
}

• 引入index.ts中整理好的系统预先配置的权限列表，作为我们所需要的参数permissionList，。

import permissionList from './permission'

• 通过接口获取当前用户的权限列表，作为我们所需要的参数permissions。

import permissions from '存放服务端返回接口权限列表数据的地方'

permissionList形如：

{"admin": {"add": "/admin-add","delete": "/admin-delete","edit": "/admin-edit"},"user": {"add": "/user-add","delete": "/user-delete"}
}

permissions形如：

["/user-add","/user-delete"
]

• 在项目中的入口文件中引入 v-permission，将前面提到的两个参数作为选项，然后使用插件并传入选项：

import { createApp } from 'vue'
import App from './views/App.vue'
import permission from "@/directive/permission" 
import permissionList from '@/permission'
import permissions from '存放服务端返回接口权限列表数据的地方'const app = createApp(App);const options = {permissionList,permissions
}app.use(permission, options)app.mount('#app')

• 在文件中使用。

• 以指令的方式使用：

  • v-permission指令形式：

    <el-button v-permission="{ module: '模块名', auth: '权限key值' }"> 有权限则显示 </el-button>
    

  • v-if指令形式：

    <el-button v-if="hasPermissions({ module: '模块名', auth: '权限key值' })"> 有权限则显示 </el-button>
    

• 以方法的方式使用：

  import { inject } from "vue";// 注入权限判断方法 hasPermissions
  const hasPermissions = inject("hasPermissions");
  if (hasPermissions({ module: '模块名', auth: '权限key值' })) {console.log("用户有权限");
  } else {console.log("用户没有权限");
  }