权限控制

权限分三个粒度：动态路由控制页面、v-hasPerm 控制按钮、后端 RBAC 控制数据。按需选用。

页面权限

用户在路由 meta 中声明权限标识，登录后按角色生成可访问路由：

{
  path: "/system/user",
  component: () => import("@/views/system/user/index.vue"),
  meta: {
    title: "用户管理",
    icon: "user",
    perms: ["sys:user:list"],  // 权限标识
    roles: ["ADMIN"],          // 角色限制
  },
}

按钮权限

指令方式

<template>
  <!-- 单个权限 -->
  <el-button v-hasPerm="['sys:user:create']">新增</el-button>

  <!-- 多个权限（满足其一即可） -->
  <el-button v-hasPerm="['sys:user:update', 'sys:user:delete']">编辑/删除</el-button>
</template>

函数方式

import { hasPerm } from "@/utils/auth"

if (hasPerm("sys:user:update")) {
  // 有权限时执行
}

权限标识规范

采用 模块:功能:操作 格式，如 sys:user:create。

操作	标识	示例
查询	list	sys:user:list
查看	view	sys:user:view
新增	create	sys:user:create
编辑	update	sys:user:update
删除	delete	sys:user:delete
导入	import	sys:user:import
导出	export	sys:user:export
分配权限	assign	sys:role:assign