vue2server7 7.0.50 → 7.0.52

package/test/vue3_permission_directive_advanced.md

@@ -1,248 +0,0 @@
-# Vue3 按钮权限管理（进阶版：自定义指令）
-
-## 📌 目标
-实现一套通用的按钮权限控制方案，支持：
-
-- ✅ 单权限 / 多权限
-- ✅ AND / OR 权限判断
-- ✅ 隐藏 或 禁用 控制
-- ✅ 动态更新权限
-- ✅ 可扩展（Pinia / 后端权限）
-
----
-
-## 🧩 一、指令实现
-
-```ts
-// src/directives/permission.ts
-import type { Directive } from 'vue'
-
-function getPermissions(): string[] {
-  return JSON.parse(localStorage.getItem('permissions') || '[]')
-}
-
-function checkPermission(value: any, permissions: string[]) {
-  if (typeof value === 'string') {
-    return permissions.includes(value)
-  }
-
-  if (Array.isArray(value)) {
-    return value.some(p => permissions.includes(p))
-  }
-
-  if (typeof value === 'object') {
-    const { code, mode = 'or' } = value
-
-    if (Array.isArray(code)) {
-      return mode === 'and'
-        ? code.every(p => permissions.includes(p))
-        : code.some(p => permissions.includes(p))
-    }
-
-    return permissions.includes(code)
-  }
-
-  return false
-}
-
-function handleEl(el: HTMLElement, hasPermission: boolean, effect = 'remove') {
-  if (hasPermission) return
-
-  if (effect === 'disable') {
-    el.setAttribute('disabled', 'true')
-    el.classList.add('is-disabled')
-    el.style.pointerEvents = 'none'
-  } else {
-    el.parentNode?.removeChild(el)
-  }
-}
-
-export const permissionDirective: Directive = {
-  mounted(el, binding) {
-    const permissions = getPermissions()
-    const { value, arg } = binding
-
-    const hasPermission = checkPermission(value, permissions)
-
-    handleEl(el, hasPermission, arg)
-  },
-
-  updated(el, binding) {
-    const permissions = getPermissions()
-    const { value, arg } = binding
-
-    const hasPermission = checkPermission(value, permissions)
-
-    handleEl(el, hasPermission, arg)
-  }
-}
-```
-
----
-
-## 🚀 二、全局注册
-
-```ts
-// main.ts
-import { createApp } from 'vue'
-import App from './App.vue'
-import { permissionDirective } from '@/directives/permission'
-
-const app = createApp(App)
-
-app.directive('permission', permissionDirective)
-
-app.mount('#app')
-```
-
----
-
-## 🎯 三、使用方式
-
-### 1️⃣ 单权限
-```vue
-<el-button v-permission="'user:add'">新增</el-button>
-```
-
----
-
-### 2️⃣ 多权限（满足一个）
-```vue
-<el-button v-permission="['user:add','user:create']">
-  新增
-</el-button>
-```
-
----
-
-### 3️⃣ 多权限（必须全部满足）
-```vue
-<el-button v-permission="{ code: ['user:add','user:vip'], mode: 'and' }">
-  高级新增
-</el-button>
-```
-
----
-
-### 4️⃣ 无权限 → 禁用按钮
-```vue
-<el-button v-permission:disable="'user:add'">
-  新增
-</el-button>
-```
-
----
-
-## 🧠 四、推荐优化（生产环境必做）
-
-### ✔ 使用 Pinia 管理权限
-
-```ts
-// stores/user.ts
-import { defineStore } from 'pinia'
-
-export const useUserStore = defineStore('user', {
-  state: () => ({
-    permissions: [] as string[]
-  })
-})
-```
-
-### ✔ 修改指令权限来源
-
-```ts
-import { useUserStore } from '@/stores/user'
-
-const permissions = useUserStore().permissions
-```
-
----
-
-## 📦 五、权限格式规范
-
-建议统一格式：
-
-```
-user:add
-user:delete
-order:list
-order:create
-```
-
----
-
-## 🔐 六、后端权限校验（必须）
-
-前端权限只是 UI 控制，后端必须校验：
-
-```ts
-if (!user.permissions.includes('user:add')) {
-  throw new Error('Forbidden')
-}
-```
-
----
-
-## ⚠️ 七、常见问题
-
-### ❌ 权限变化 UI 不更新
-✔ 已通过 `updated` 生命周期解决
-
----
-
-### ❌ Element Plus 禁用无效
-✔ 必须加：
-
-```ts
-el.style.pointerEvents = 'none'
-```
-
----
-
-### ❌ 使用 v-if 控制权限
-不推荐，会导致：
-- 模板混乱
-- 逻辑分散
-
----
-
-## 🏁 总结
-
-推荐最终方案：
-
-👉 自定义指令（控制 UI）  
-👉 Pinia（存权限）  
-👉 后端校验（保证安全）  
-
-这样你的权限系统：
-- 清晰
-- 可维护
-- 可扩展
-
-
-type Button = {
-appName: string
-}
-
-type Menu = {
-children?: Menu[]
-buttonChildren?: Button[]
-}
-
-export function getButtonPermissions(menuTree: Menu[]): string[] {
-const set = new Set<string>()
-
-const dfs = (nodes: Menu[]) => {
-nodes.forEach(node => {
-node.buttonChildren?.forEach(btn => {
-if (btn.appName) set.add(btn.appName)
-})
-
-      if (node.children) dfs(node.children)
-    })
-}
-
-dfs(menuTree)
-
-return [...set]
-}