权限管理使用说明.md权限管理系统使用说明功能概述已为您的项目实现了完整的菜单权限管理系统，包括：菜单权限控制 -

权限管理系统使用说明

功能概述

已为您的项目实现了完整的菜单权限管理系统，包括：

菜单权限控制 - 根据用户权限动态显示/隐藏菜单项
路由权限守卫 - 防止无权限用户直接访问页面
权限指令 - 在模板中控制元素显示
权限混入 - 在组件中检查权限

使用方法

1. 在模板中使用权限指令

<template>
  <div>
    <!-- 只有拥有 'articles:create' 权限的用户才能看到此按钮 -->
    <button v-permission="'articles:create'" class="btn btn-primary">
      创建文章
    </button>
    
    <!-- 只有管理员角色才能看到此按钮 -->
    <button v-role="'admin'" class="btn btn-danger">
      删除所有数据
    </button>
    
    <!-- 支持多个角色 -->
    <div v-role="['admin', 'editor']">
      编辑器工具栏
    </div>
  </div>
</template>

2. 在组件方法中检查权限

<script>
export default {
  methods: {
    handleEdit() {
      // 检查是否有编辑权限
      if (this.$hasPermission('articles:edit')) {
        // 执行编辑操作
        this.editArticle();
      } else {
        this.$toast('没有编辑权限', { type: 'warning' });
      }
    },
    
    handleDelete() {
      // 检查多个权限
      if (this.$hasAnyPermission(['articles:delete', 'admin:all'])) {
        this.deleteArticle();
      }
    },
    
    handleAdminAction() {
      // 检查角色
      if (this.$hasRole('admin')) {
        this.performAdminAction();
      }
    }
  }
}
</script>

3. 在计算属性中使用

<script>
export default {
  computed: {
    canCreateArticle() {
      return this.$hasPermission('articles:create');
    },
    
    canManageSystem() {
      return this.$hasRole(['admin', 'super_admin']);
    },
    
    availableActions() {
      const actions = [];
      if (this.$hasPermission('articles:edit')) {
        actions.push({ name: '编辑', action: 'edit' });
      }
      if (this.$hasPermission('articles:delete')) {
        actions.push({ name: '删除', action: 'delete' });
      }
      return actions;
    }
  }
}
</script>

权限配置

默认用户权限

admin: 拥有所有权限
editor: 拥有内容编辑相关权限
viewer: 只有查看权限
user: 基础用户权限

测试账号

您可以使用以下测试账号登录查看不同权限效果：

用户名: admin, 密码: 任意 - 管理员权限（查看所有菜单）
用户名: editor, 密码: 任意 - 编辑者权限（部分菜单）
用户名: viewer, 密码: 任意 - 查看者权限（只读菜单）
用户名: 其他, 密码: 任意 - 普通用户权限（基础菜单）

权限列表

当前系统支持的权限：

dashboard:view - 查看仪表板
automation:view - 查看自动化流程
workflow:view - 查看一键生成
content:view - 查看分层管理
articles:view/create/edit/delete - 文章管理相关
posters:view/create/edit/delete - 海报管理相关
template:manage - 模板管理
media:view - 多媒体管理
customers:view/create/edit/delete - 客户管理相关
accounts:view/create/edit/delete - 账号管理相关
assets:view - 要素管理
templates:view - 模板库
images:view - 图片库
fonts:view - 字体库
system:view - 系统管理
settings:view/edit - 系统设置相关
prompts:view/edit - 提示词模板相关

扩展权限

添加新权限

在菜单项中添加权限字段：

{
  title: "新功能",
  icon: "bi bi-star",
  path: "/new-feature",
  permission: "new_feature:view" // 添加权限
}

在路由中添加权限元信息：

{
  path: "/new-feature",
  name: "NewFeature",
  component: () => import("../views/NewFeature.vue"),
  meta: { title: "新功能", requiresAuth: true, permission: "new_feature:view" }
}

在登录模拟数据中为相应角色添加权限：

if (username === 'admin') {
  permissions = [
    // ...existing permissions
    'new_feature:view',
    'new_feature:create'
  ];
}

自定义权限检查

// 创建自定义权限检查方法
methods: {
  canAccessAdvancedFeatures() {
    return this.$hasAllPermissions([
      'advanced:view',
      'premium:access'
    ]) && this.$hasRole('premium_user');
  }
}