权限控制

vue-admin-kit 提供 v-hasPermi 和 v-hasRole 指令，用于控制元素的显示/隐藏。

配置权限数据源

// src/config/pageTemplate/index.ts
import { configurePermissionDirective } from "vue-admin-kit";
import { useUserStore } from "@/store/modules/user";

export function setupPageTemplateConfig() {
  configurePermissionDirective({
    getPermissions: () => useUserStore().permissions,
    getRoles: () => useUserStore().roles,
    superPermission: "*:*:*", // 超级管理员权限标识
    superRoles: ["superadmin", "admin"], // 超级管理员角色
  });
}

注册指令

// src/directive/index.ts
import { registerPermissionDirectives } from "vue-admin-kit";
import { App } from "vue";

export default (app: App) => {
  registerPermissionDirectives(app);
};

使用指令

<template>
  <!-- 权限控制 -->
  <el-button v-hasPermi="['system:user:add']">新增</el-button>
  <el-button v-hasPermi="['system:user:edit', 'system:user:update']">
    编辑
  </el-button>

  <!-- 角色控制 -->
  <el-button v-hasRole="['admin']">管理员操作</el-button>
  <el-button v-hasRole="['admin', 'editor']">编辑内容</el-button>
</template>

编程式权限检查

import { hasPermission, hasRole } from "vue-admin-kit";

// 检查权限
if (hasPermission(["system:user:add"])) {
  // 有权限
}

// 检查角色
if (hasRole(["admin"])) {
  // 是管理员
}

在操作按钮中使用

import { definePermissions } from "vue-admin-kit";

const permissions = definePermissions({
  add: ["system:user:add"],
  edit: ["system:user:edit"],
  delete: ["system:user:remove"],
});

useState({
  tableOptions: {
    tableOperationConfig: [
      {
        title: "新增",
        hasPermi: permissions.add,
        onClick: () => pageTemplateRef.value?.handleAdd(),
      },
    ],
    operateColumns: [
      {
        title: "编辑",
        hasPermi: permissions.edit,
        onClick: (row) => pageTemplateRef.value?.handleEdit(row),
      },
    ],
  },
});