直接用组合式函数封装权限校验逻辑更灵活易测，核心是通过Pinia管理权限列表并导出has/can函数：has用于逻辑判断，can返回响应式计算属性供模板v-if绑定，支持单个或数组权限码校验及白名单守卫。
直接用组合式函数封装权限校验逻辑，比全局指令更灵活、更易测试，也更适合配合 Pinia 管理权限状态。核心思路是：把“用户当前拥有的权限列表”作为响应式依赖，封装一个可复用的 hasPermission 函数，返回布尔值或计算属性，供按钮组件按需调用。
1. 权限数据统一管理（Pinia store）
先在 Pinia store 中定义并持久化权限列表，确保刷新后不丢失：
- 登录成功后，从后端接口获取
permissions: string[]（如['user:add', 'user:delete', 'order:export']） - 存入 store 的
state.permissions，同时同步到localStorage或sessionStorage - store 提供
getPermissions()方法，支持响应式读取
2. 编写组合式函数 usePermission
新建 src/composables/usePermission.ts：
import { computed } from 'vue'
import { useUserStore } from '@/stores/user'
<p>export function usePermission() {
const userStore = useUserStore()</p><p>// 返回一个校验函数：传入权限码（单个或数组），判断是否拥有
const has = (code: string | string[]): boolean => {
if (!Array.isArray(code)) return userStore.permissions.includes(code)
return code.some(c => userStore.permissions.includes(c))
}</p><p>// 返回响应式计算属性，自动订阅权限变更（适合 v-if）
const can = (code: string | string[]) => {
return computed(() => has(code))
}</p><p>return { has, can }
}</p>
说明：
- has() 是普通函数，适合逻辑判断（如 API 前置校验）
- can() 返回 computed，适合模板中绑定（v-if="can('user:delete')"），权限更新时自动重算
3. 在组件中使用
在需要控制按钮显示的页面中：
vue-admin-change-reviewer
下载
审查 Vue 管理后台的变更请求（Vue 2 + Element UI，Vue 3 + Element Plus）。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
<template><button v-if="can('user:add')">新增用户</button>
<button v-if="can(['user:edit', 'user:delete'])">批量操作</button>
</template><p><script setup lang="ts">
import { usePermission } from '@/composables/usePermission'</script></p><p>const { can } = usePermission()
</p>
优势：
- 不侵入 DOM，不操作 el.parentNode.removeChild，符合 Composition API 设计哲学
- 支持细粒度响应式，权限列表变化时按钮自动显隐
- 可轻松扩展为带缓存、多角色 or/and 逻辑（如 has(['a','b'], 'and')）
4. 白名单校验的增强写法（可选）
若业务明确只允许白名单内权限（即禁止未声明的权限码），可在 has 中加一层守卫：
const WHITELIST = ['user:add', 'user:edit', 'user:delete', 'order:export'] as const
type PermissionCode = typeof WHITELIST[number]
<p>const has = (code: PermissionCode | PermissionCode[]): boolean => {
const list = Array.isArray(code) ? code : [code]
// 先检查是否在白名单中，再查用户是否拥有
return list.every(c => WHITELIST.includes(c)) &&
list.some(c => userStore.permissions.includes(c))
}</p>
这样既能防止前端误传非法权限码，又能避免后端漏配导致的静默失败。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
