M-AdminM-Admin
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
首页
指南
  • MTable
  • MForm
  • MTinymce
  • 季度选择器
  • MSearchForm
  • 预览地址
  • Gitee源码
  • Github源码
  • 更新日志
捐赠
  • 指南

    • 介绍
    • 快速上手
    • 目录结构
    • 路由、菜单
    • 权限管理
    • 系统配置
  • 进阶

    • 网络请求
    • 国际化配置
    • Hooks
    • Store
    • TSX 支持
  • 组件教程

    • MTable
    • MForm
    • MTinymce
    • 季度选择器
    • MSearchForm
  • 其他

    • 项目代码规范
    • 常见问题

权限管理

菜单权限

如果菜单是后端返回,在路由配置对 id 进行配置即可。

   {
        path: 'user',
        name: 'user',
        component: () => import('@/views/system/user/index.vue'),
        meta: {
          id: '1003',  // 此处配置菜单权限Id
          locale: 'menu.system.user',
          requiresAuth: true,
          icon: 'user',
          level: 2,
        },
      },

按钮权限

按钮权限根据自定义指令 v-permission 进行配置。

<a-button type="primary" status="success" v-permission="1201">
  <icon-edit size="18" />
</a-button>

指令permission

import { DirectiveBinding } from "vue";
import { useUserStore } from "@/store";
import settings from "@/config/settings.json";

function checkPermission(el: HTMLElement, binding: DirectiveBinding) {
  const { value } = binding;
  const userStore = useUserStore();
  const { roles } = userStore;
  if (typeof value === "string" || typeof value === "number") {
    // 这里根据项目进行调整
    const hasPermission = settings.menuFromServer
      ? roles[0].operationIds.includes(value)
      : true;
    if (!hasPermission && el.parentNode) {
      el.parentNode.removeChild(el);
    }
  } else {
    throw new Error(`need roles! Like v-permission="['10000','10001']"`);
  }
}

export default {
  mounted(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
  updated(el: HTMLElement, binding: DirectiveBinding) {
    checkPermission(el, binding);
  },
};
最近更新:: 2025/6/20 05:46
Contributors: xuyp
Prev
路由、菜单
Next
系统配置