权限与按钮
这篇解决什么
侧栏看不见和按钮灰掉分别看哪份数据。读完用权限字 iot:device:create 控按钮，不要在页面里写死角色名。
菜单树决定「进不进得了页」。permissions 数组决定「页里哪些按钮还在」。都来自 /system/auth/get-permission-info。路由怎么挂见 菜单与路由。
示意图：菜单和按钮同一接口，两套字段。
从哪改
| 名称 | 说明 | 仓库路径 |
|---|---|---|
| 权限接口 | menus / permissions / roles | ruoyi-office/yudao-module-system/.../AuthController.java |
| 写入 | setAccessCodes(permissions) | apps/web-antd/src/store/auth.ts |
| 判断 | 权限字交集 | packages/effects/access/src/use-access.ts |
| 指令 | v-access:code，没权就卸 DOM | packages/effects/access/src/directive.ts |
| 表格操作列 | show: () => hasAccessByCodes([...]) | 各模块 data.ts |
本仓库 accessMode 是 backend。指令默认走 hasAccessByCodes。只有改成 frontend 且写 v-access:role 才按角色名。产品页不要切 frontend 来省事。
权限字与后端 @PreAuthorize("@ss.hasPermission('iot:device:create')") 同一串。菜单类型是按钮时，permission 字段进 permissions；只配了菜单、没配按钮权限，页面能开、新增按钮没有。
hasAccessByCodes 是「任一命中」。传多个 code 表示或，不是且。需要且关系就调用两次。
不要用 v-if="userId === 1" 冒充超管。租户管理员也走角色和权限字。
字段
| 名称 | 说明 | 仓库路径 |
|---|---|---|
permissions | 权限字列表 | AuthPermissionInfoRespVO |
accessCodes | 前端副本 | useAccessStore |
v-access:code | 模板里藏按钮 | registerAccessDirective |
指令只在 mounted 判一次
权限列表后到、或中途改角色，已挂上的节点不会自动回来。表格操作列用函数 show 更稳。
先对后端注解
前端写了 iot:device:export，Controller 没挂同一 permission，接口仍可能 403，或反过来裸接口能打。两边一起加。
vue
<Button v-access:code="['iot:device:create']">新增</Button>ts
const { hasAccessByCodes } = useAccess();
hasAccessByCodes(['iot:device:update']);