在Vue 3中實現按鈕級別的權限控制，可以通過多種方式實現。這里我將介紹幾種常見的方法：

方法1：使用Vue 3的Composition API

在Vue 3中，你可以使用Composition API來創建一個可復用的邏輯來處理權限控制。

1. 創建權限控制邏輯

首先，你可以創建一個usePermission.js文件，用于封裝權限控制的邏輯。??

// src/composables/usePermission.js
import { ref, computed } from 'vue';export function usePermission(userRoles) {const permissions = ref(['admin', 'editor', 'viewer']); // 假設的權限列表const hasPermission = computed(() => {return permissions.value.includes(userRoles);});return { hasPermission };
}

?2.在組件中使用

然后，在需要控制權限的組件中引入并使用這個邏輯。

<template><button v-if="hasPermission" @click="handleClick">編輯</button>
</template><script setup>
import { usePermission } from '@/composables/usePermission';
import { ref } from 'vue';const userRole = ref('editor'); // 當前用戶的角色
const { hasPermission } = usePermission(userRole);function handleClick() {console.log('Clicked');
}
</script>

方法2：使用Vue 3的Provide/Inject API

如果你想要在整個應用中共享用戶角色信息，可以使用provide/inject。

1. 在根組件中提供用戶角色

   <template><div><App /></div>
   </template><script setup>
   import { provide, ref } from 'vue';
   import App from './App.vue';const userRole = ref('editor'); // 當前用戶的角色
   provide('userRole', userRole); // 提供用戶角色信息
   </script>

2. 在子組件中使用

<template><button v-if="hasPermission" @click="handleClick">編輯</button>
</template><script setup>
import { inject, computed } from 'vue';
import { usePermission } from '@/composables/usePermission'; // 復用之前的權限邏輯組件const userRole = inject('userRole'); // 注入用戶角色信息
const { hasPermission } = usePermission(userRole); // 使用權限控制邏輯function handleClick() {console.log('Clicked');
}
</script>

方法3：使用Vue Router的元信息（Meta Fields）進行權限控制

如果你的應用是基于Vue Router的，你可以利用路由的元信息（meta fields）來控制訪問。

1. 定義路由并添加meta字段

import { createRouter, createWebHistory } from 'vue-router';
import Home from './views/Home.vue';
import Admin from './views/Admin.vue';
import Viewer from './views/Viewer.vue';
import { ref } from 'vue'; // 引入ref用于演示，實際應用中應從某處獲取當前用戶角色信息，如localStorage或Vuex等。const userRole = ref('editor'); // 當前用戶的角色，實際應用中應從某處獲取。例如：localStorage.getItem('userRole')或Vuex狀態。
const routes = [{ path: '/', component: Home },{ path: '/admin', component: Admin, meta: { roles: ['admin'] } }, // 僅admin角色可以訪問的路由。{ path: '/viewer', component: Viewer, meta: { roles: ['viewer', 'editor'] } } // viewer和editor角色都可以訪問的路由。
];

? ? ?2.路由守衛進行權限檢查

const router = createRouter({ history: createWebHistory(), routes });
router.beforeEach((to, from, next) => {if (to.meta.roles && !to.meta.roles.includes(userRole.value)) { // 檢查用戶角色是否符合路由所需的角色。實際應用中應從某處獲取當前用戶角色信息。例如：localStorage.getItem('userRole')或Vuex狀態。 確保這里的角色匹配邏輯正確。例如，你可能需要從store中獲取當前用戶角色而非硬編碼。這里僅為示例。 實際應用中應從store或全局狀態管理獲取當前用戶角色。例如：store.state.auth.userRole 或 Vuex的