尧图网站建设 
vue-vben-admin 如何用权限码和角色实现按钮级细粒度权限控制【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin在 vue-vben-admin 中菜单和路由的显隐只是权限控制的一半很多业务场景需要控制到按钮级别同一个页面对不同账号显示不同的操作按钮。框架通过vben/access包提供了一套按钮级控制能力判断依据有两类接口返回的权限码access code和登录用户的角色role两者都可以用组件、API、指令三种方式写在模板里。本文以 playground 演示应用为运行环境说明权限码如何从接口流入前端状态、三种控制写法如何区分以及如何切换账号验证按钮显隐是否符合预期。准备跑起带权限演示的 playground 环境按钮级权限的完整链路接口返回权限码 → 登录时存入状态 → 模板中判断显隐在 playground 应用中有可运行的演示后端由内置的 mock 服务提供不需要自己搭接口。环境要求与启动步骤来自 快速开始Node.js 22.18.0 及以上版本项目只支持使用pnpm安装依赖默认通过corepack安装指定版本的 pnpm。cd vue-vben-admin # 使用项目指定的pnpm版本进行依赖安装 npm i -g corepack # 安装依赖 pnpm install然后只启动 playground 应用避免在选择界面里逐项挑选pnpm run dev:play启动后在浏览器访问http://localhost:5555。mock 数据里内置了三个账号见 mock-data.ts密码均为123456账号用户名角色权限码Supervben[super]AC_100100、AC_100110、AC_100120、AC_100010Adminadmin[admin]AC_100010、AC_100020、AC_100030Userjack[user]AC_1000001、AC_1000002后续所有按钮显隐的验证都以这三个账号的差异为基准。权限码从哪里来登录流程中的注入点按钮能否显示前提是当前登录账号的权限码已经进入前端状态。登录流程位于应用的src/store/authplayground 中的实现在 store/auth.tsconst [fetchUserInfoResult, accessCodes] await Promise.all([ fetchUserInfo(), getAccessCodesApi(), ]); userInfo fetchUserInfoResult; accessStore.setAccessCodes(accessCodes);也就是说登录成功后会并行请求用户信息和权限码权限码通过accessStore.setAccessCodes写入 access store之后模板中的判断函数读取的都是这份状态。对应接口在 api/core/auth.ts 中定义为一个返回字符串数组的 GET 请求export async function getAccessCodesApi() { return requestClient.getstring[](/auth/codes); }权限码返回的数据结构为字符串数组例如[AC_100100, AC_100110, AC_100120, AC_100010]。官方文档要求找到getAccessCodes对应的接口可根据业务逻辑进行调整。在本仓库中mock 实现位于 apps/backend-mock/api/auth/codes.ts它根据登录用户从 MOCK_CODES 中按用户名匹配出权限码数组返回替换为真实后端时只需要让新接口保持字符串数组这一返回结构。三种写法控制按钮组件、API、指令拿到权限码后用vben/access提供的AccessControl组件和 API 来控制按钮显示与隐藏。以下示例与 docs/src/guide/in-depth/access.md 及 button-control.vue 中的演示一致权限码均取自上表。组件方式AccessControl通过type属性区分判断依据传typecode时按权限码判断codes支持单个或数组多个权限码只要有一个满足即显示script langts setup import { AccessControl, useAccess } from vben/access; const { accessMode, hasAccessByCodes } useAccess(); /script template !-- 需要指明 typecode -- AccessControl :codes[AC_100100] typecode Button Super 账号可见 [AC_100100] /Button /AccessControl AccessControl :codes[AC_100030] typecode Button Admin 账号可见 [AC_100030] /Button /AccessControl AccessControl :codes[AC_1000001] typecode Button User 账号可见 [AC_1000001] /Button /AccessControl AccessControl :codes[AC_100100, AC_100030] typecode Button Super Admin 账号可见 [AC_100100,AC_100030] /Button /AccessControl /templateAPI 方式useAccess()暴露hasAccessByCodes配合v-if使用适合需要在逻辑里做进一步分支的场景script langts setup import { AccessControl, useAccess } from vben/access; const { hasAccessByCodes } useAccess(); /script template Button v-ifhasAccessByCodes([AC_100100]) Super 账号可见 [AC_100100] /Button Button v-ifhasAccessByCodes([AC_100030]) Admin 账号可见 [AC_100030] /Button Button v-ifhasAccessByCodes([AC_1000001]) User 账号可见 [AC_1000001] /Button Button v-ifhasAccessByCodes([AC_100100, AC_100030]) Super Admin 账号可见 [AC_100100,AC_100030] /Button /template指令方式指令支持绑定单个或多个权限码单个时可以直接传入字符串多个则传入数组。判断不通过时元素会被移除见 directive.ts 中el?.remove()的实现template Button classmr-4 v-access:codeAC_100100 Super 账号可见 AC_100100 /Button Button classmr-4 v-access:code[AC_100030] Admin 账号可见 [AC_100030] /Button Button classmr-4 v-access:code[AC_1000001] User 账号可见 [AC_1000001] /Button Button classmr-4 v-access:code[AC_100100, AC_1000001] Super Admin 账号可见 [AC_100100,AC_1000001] /Button /template按角色控制按钮及其适用条件角色判断方式不需要接口返回的权限码直接通过userInfo.roles判断按钮是否显示。三种写法与权限码一一对应script langts setup import { AccessControl } from vben/access; /script template AccessControl :codes[super] Button Super 角色可见 /Button /AccessControl AccessControl :codes[admin] Button Admin 角色可见 /Button /AccessControl AccessControl :codes[user] Button User 角色可见 /Button /AccessControl AccessControl :codes[super, admin] Button Super Admin 角色可见 /Button /AccessControl /templatescript langts setup import { useAccess } from vben/access; const { hasAccessByRoles } useAccess(); /script template Button v-ifhasAccessByRoles([super]) Super 账号可见 /Button Button v-ifhasAccessByRoles([admin]) Admin 账号可见 /Button Button v-ifhasAccessByRoles([user]) User 账号可见 /Button Button v-ifhasAccessByRoles([super, admin]) Super Admin 账号可见 /Button /templatetemplate Button classmr-4 v-access:rolesuper Super 角色可见 /Button Button classmr-4 v-access:role[admin] Admin 角色可见 /Button Button classmr-4 v-access:role[user] User 角色可见 /Button Button classmr-4 v-access:role[super, admin] Super Admin 角色可见 /Button /template两点需要注意AccessControl组件的type属性默认为role见 access-control.vue所以按角色控制时可以不显式写type按权限码控制时必须写typecode。v-access:role指令只在权限模式为frontend时才按角色判断其他模式下该指令会走权限码判断逻辑见 directive.ts 中accessMode.value frontend binding.arg role的分支。这也解释了为什么演示页面 button-control.vue 只在accessMode frontend时才渲染角色相关的卡片。权限模式在应用目录的preferences.ts中通过app.accessMode配置可选frontend、backend、mixed写法参考 权限文档。以 playground 为例在 playground/src/preferences.ts 的overridesPreferences.app中加一行app: { accessMode: frontend, },该文件注释明确提醒更改配置后请清空缓存否则可能不生效。文档同时说明了前端模式的局限权限相对不自由如果后台改动角色前台也需要跟着改动适合角色较固定的系统如果角色或权限码经常变化应使用后端/混合模式改由接口决定权限。验证切换账号观察按钮变化验证方式直接沿用演示页的设计——切换到不同账号观察同一页面上按钮集合的变化。以权限码为例对照表可以预先列出预期结果依据是上文三个账号的权限码数据按钮绑定的权限码vben (Super)admin (Admin)jack (User)[AC_100100]显示隐藏隐藏[AC_100030]隐藏显示隐藏[AC_1000001]隐藏隐藏显示[AC_100100, AC_100030]显示显示隐藏具体操作路径用vben/123456登录进入演示路由/demos/access/button-controlmock 菜单数据中该路由名为AccessButtonControlDemo对应组件 button-control.vue。确认页面上当前显示 Super 可见的按钮AC_100100、AC_100100AC_100030组合不显示 Admin、User 按钮。在页面账号切换卡片中点击切换为 Admin 账号页面内部执行resetAllStores()后重新登录并刷新router.go(0)此时AC_100030相关按钮出现、Super 按钮消失。再切换到 User 账号jack只应看到AC_1000001相关按钮。页面顶部会显示当前角色可以用来确认切换账号已经生效如果按钮显示与上表不一致优先检查登录流程里getAccessCodesApi()是否真的被调用并写入了accessStore以及权限码字符串是否与接口返回值完全一致权限码是精确字符串匹配如AC_100100与AC_1000001是两个不同的码。限制与边界AccessControl组件在codes为空数组时会直接渲染插槽内容v-if!codes即不传权限码等于不控制配置漏传不会导致按钮被隐藏排查按钮不该显示却显示了时要先确认codes真的传入了。按钮级控制只负责前端显示/隐藏。菜单级别还有一个相关但不同的机制meta.menuVisibleWithForbidden: true可以让菜单可见但访问时跳转 403这是路由权限配置与本文的按钮控制不冲突也不要用它来隐藏按钮。前端权限码和角色都只控制展示真实的数据安全仍要由后端接口自行校验这一点在框架层面不做保证接入真实后端时需要自行落实。完成以上配置后按钮级权限的落地就完整了接口负责发放权限码store/auth负责在登录时写入状态模板里用组件、API 或指令三选一完成显隐判断最后用三个内置账号的切换演示核对每个按钮的归属是否符合预期。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 vue-vben-admin 如何用权限码和角色实现按钮级细粒度权限控制
vue-vben-admin 如何用权限码和角色实现按钮级细粒度权限控制【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin在 vue-vben-admin 中菜单和路由的显隐只是权限控制的一半很多业务场景需要控制到按钮级别同一个页面对不同账号显示不同的操作按钮。框架通过vben/access包提供了一套按钮级控制能力判断依据有两类接口返回的权限码access code和登录用户的角色role两者都可以用组件、API、指令三种方式写在模板里。本文以 playground 演示应用为运行环境说明权限码如何从接口流入前端状态、三种控制写法如何区分以及如何切换账号验证按钮显隐是否符合预期。准备跑起带权限演示的 playground 环境按钮级权限的完整链路接口返回权限码 → 登录时存入状态 → 模板中判断显隐在 playground 应用中有可运行的演示后端由内置的 mock 服务提供不需要自己搭接口。环境要求与启动步骤来自 快速开始Node.js 22.18.0 及以上版本项目只支持使用pnpm安装依赖默认通过corepack安装指定版本的 pnpm。cd vue-vben-admin # 使用项目指定的pnpm版本进行依赖安装 npm i -g corepack # 安装依赖 pnpm install然后只启动 playground 应用避免在选择界面里逐项挑选pnpm run dev:play启动后在浏览器访问http://localhost:5555。mock 数据里内置了三个账号见 mock-data.ts密码均为123456账号用户名角色权限码Supervben[super]AC_100100、AC_100110、AC_100120、AC_100010Adminadmin[admin]AC_100010、AC_100020、AC_100030Userjack[user]AC_1000001、AC_1000002后续所有按钮显隐的验证都以这三个账号的差异为基准。权限码从哪里来登录流程中的注入点按钮能否显示前提是当前登录账号的权限码已经进入前端状态。登录流程位于应用的src/store/authplayground 中的实现在 store/auth.tsconst [fetchUserInfoResult, accessCodes] await Promise.all([ fetchUserInfo(), getAccessCodesApi(), ]); userInfo fetchUserInfoResult; accessStore.setAccessCodes(accessCodes);也就是说登录成功后会并行请求用户信息和权限码权限码通过accessStore.setAccessCodes写入 access store之后模板中的判断函数读取的都是这份状态。对应接口在 api/core/auth.ts 中定义为一个返回字符串数组的 GET 请求export async function getAccessCodesApi() { return requestClient.getstring[](/auth/codes); }权限码返回的数据结构为字符串数组例如[AC_100100, AC_100110, AC_100120, AC_100010]。官方文档要求找到getAccessCodes对应的接口可根据业务逻辑进行调整。在本仓库中mock 实现位于 apps/backend-mock/api/auth/codes.ts它根据登录用户从 MOCK_CODES 中按用户名匹配出权限码数组返回替换为真实后端时只需要让新接口保持字符串数组这一返回结构。三种写法控制按钮组件、API、指令拿到权限码后用vben/access提供的AccessControl组件和 API 来控制按钮显示与隐藏。以下示例与 docs/src/guide/in-depth/access.md 及 button-control.vue 中的演示一致权限码均取自上表。组件方式AccessControl通过type属性区分判断依据传typecode时按权限码判断codes支持单个或数组多个权限码只要有一个满足即显示script langts setup import { AccessControl, useAccess } from vben/access; const { accessMode, hasAccessByCodes } useAccess(); /script template !-- 需要指明 typecode -- AccessControl :codes[AC_100100] typecode Button Super 账号可见 [AC_100100] /Button /AccessControl AccessControl :codes[AC_100030] typecode Button Admin 账号可见 [AC_100030] /Button /AccessControl AccessControl :codes[AC_1000001] typecode Button User 账号可见 [AC_1000001] /Button /AccessControl AccessControl :codes[AC_100100, AC_100030] typecode Button Super Admin 账号可见 [AC_100100,AC_100030] /Button /AccessControl /templateAPI 方式useAccess()暴露hasAccessByCodes配合v-if使用适合需要在逻辑里做进一步分支的场景script langts setup import { AccessControl, useAccess } from vben/access; const { hasAccessByCodes } useAccess(); /script template Button v-ifhasAccessByCodes([AC_100100]) Super 账号可见 [AC_100100] /Button Button v-ifhasAccessByCodes([AC_100030]) Admin 账号可见 [AC_100030] /Button Button v-ifhasAccessByCodes([AC_1000001]) User 账号可见 [AC_1000001] /Button Button v-ifhasAccessByCodes([AC_100100, AC_100030]) Super Admin 账号可见 [AC_100100,AC_100030] /Button /template指令方式指令支持绑定单个或多个权限码单个时可以直接传入字符串多个则传入数组。判断不通过时元素会被移除见 directive.ts 中el?.remove()的实现template Button classmr-4 v-access:codeAC_100100 Super 账号可见 AC_100100 /Button Button classmr-4 v-access:code[AC_100030] Admin 账号可见 [AC_100030] /Button Button classmr-4 v-access:code[AC_1000001] User 账号可见 [AC_1000001] /Button Button classmr-4 v-access:code[AC_100100, AC_1000001] Super Admin 账号可见 [AC_100100,AC_1000001] /Button /template按角色控制按钮及其适用条件角色判断方式不需要接口返回的权限码直接通过userInfo.roles判断按钮是否显示。三种写法与权限码一一对应script langts setup import { AccessControl } from vben/access; /script template AccessControl :codes[super] Button Super 角色可见 /Button /AccessControl AccessControl :codes[admin] Button Admin 角色可见 /Button /AccessControl AccessControl :codes[user] Button User 角色可见 /Button /AccessControl AccessControl :codes[super, admin] Button Super Admin 角色可见 /Button /AccessControl /templatescript langts setup import { useAccess } from vben/access; const { hasAccessByRoles } useAccess(); /script template Button v-ifhasAccessByRoles([super]) Super 账号可见 /Button Button v-ifhasAccessByRoles([admin]) Admin 账号可见 /Button Button v-ifhasAccessByRoles([user]) User 账号可见 /Button Button v-ifhasAccessByRoles([super, admin]) Super Admin 账号可见 /Button /templatetemplate Button classmr-4 v-access:rolesuper Super 角色可见 /Button Button classmr-4 v-access:role[admin] Admin 角色可见 /Button Button classmr-4 v-access:role[user] User 角色可见 /Button Button classmr-4 v-access:role[super, admin] Super Admin 角色可见 /Button /template两点需要注意AccessControl组件的type属性默认为role见 access-control.vue所以按角色控制时可以不显式写type按权限码控制时必须写typecode。v-access:role指令只在权限模式为frontend时才按角色判断其他模式下该指令会走权限码判断逻辑见 directive.ts 中accessMode.value frontend binding.arg role的分支。这也解释了为什么演示页面 button-control.vue 只在accessMode frontend时才渲染角色相关的卡片。权限模式在应用目录的preferences.ts中通过app.accessMode配置可选frontend、backend、mixed写法参考 权限文档。以 playground 为例在 playground/src/preferences.ts 的overridesPreferences.app中加一行app: { accessMode: frontend, },该文件注释明确提醒更改配置后请清空缓存否则可能不生效。文档同时说明了前端模式的局限权限相对不自由如果后台改动角色前台也需要跟着改动适合角色较固定的系统如果角色或权限码经常变化应使用后端/混合模式改由接口决定权限。验证切换账号观察按钮变化验证方式直接沿用演示页的设计——切换到不同账号观察同一页面上按钮集合的变化。以权限码为例对照表可以预先列出预期结果依据是上文三个账号的权限码数据按钮绑定的权限码vben (Super)admin (Admin)jack (User)[AC_100100]显示隐藏隐藏[AC_100030]隐藏显示隐藏[AC_1000001]隐藏隐藏显示[AC_100100, AC_100030]显示显示隐藏具体操作路径用vben/123456登录进入演示路由/demos/access/button-controlmock 菜单数据中该路由名为AccessButtonControlDemo对应组件 button-control.vue。确认页面上当前显示 Super 可见的按钮AC_100100、AC_100100AC_100030组合不显示 Admin、User 按钮。在页面账号切换卡片中点击切换为 Admin 账号页面内部执行resetAllStores()后重新登录并刷新router.go(0)此时AC_100030相关按钮出现、Super 按钮消失。再切换到 User 账号jack只应看到AC_1000001相关按钮。页面顶部会显示当前角色可以用来确认切换账号已经生效如果按钮显示与上表不一致优先检查登录流程里getAccessCodesApi()是否真的被调用并写入了accessStore以及权限码字符串是否与接口返回值完全一致权限码是精确字符串匹配如AC_100100与AC_1000001是两个不同的码。限制与边界AccessControl组件在codes为空数组时会直接渲染插槽内容v-if!codes即不传权限码等于不控制配置漏传不会导致按钮被隐藏排查按钮不该显示却显示了时要先确认codes真的传入了。按钮级控制只负责前端显示/隐藏。菜单级别还有一个相关但不同的机制meta.menuVisibleWithForbidden: true可以让菜单可见但访问时跳转 403这是路由权限配置与本文的按钮控制不冲突也不要用它来隐藏按钮。前端权限码和角色都只控制展示真实的数据安全仍要由后端接口自行校验这一点在框架层面不做保证接入真实后端时需要自行落实。完成以上配置后按钮级权限的落地就完整了接口负责发放权限码store/auth负责在登录时写入状态模板里用组件、API 或指令三选一完成显隐判断最后用三个内置账号的切换演示核对每个按钮的归属是否符合预期。【免费下载链接】vue-vben-adminA modern vue admin panel built with Vue3, Shadcn UI, Vite, TypeScript, and Monorepo. Its fast!项目地址: https://gitcode.com/GitHub_Trending/vu/vue-vben-admin创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考