在 Vue 3 项目中，使用 <script setup> 语法来根据权限显示不同的按钮，可以通过组合逻辑和模板指令来实现。以下是一个简单的示例，展示如何实现这一功能。

假设我们有一个权限数组 userPermissions，它包含了当前用户的所有权限。我们可以根据这个数组来决定是否显示某个按钮。

1. 定义权限和组件

首先，我们在 <script setup> 中定义用户权限和一个方法来检查用户是否有某个权限。

vue复制代码

<template>

<div>

<button v-if="hasPermission('edit')">Edit</button>

<button v-if="hasPermission('delete')">Delete</button>

<button v-if="hasPermission('view')">View</button>

</div>

</template>



<script setup>

import { ref } from 'vue';



// 假设这是从某个 API 或 Vuex store 获取的用户权限

const userPermissions = ref(['edit', 'view']);



// 检查用户是否有特定权限的方法

function hasPermission(permission) {

return userPermissions.value.includes(permission);

}

</script>



<style scoped>

/* 样式可以根据需要添加 */

</style>

2. 使用组合式 API

在上面的示例中，我们使用了 Vue 3 的组合式 API (ref 和 includes 方法) 来管理用户权限和检查权限的逻辑。

• ref 用于定义一个响应式的 userPermissions 数组。

• hasPermission 方法用于检查用户是否拥有特定的权限。

3. 根据权限显示按钮

在模板部分，我们使用 v-if 指令来根据 hasPermission 方法的返回值决定是否显示某个按钮。

• v-if="hasPermission('edit')"：如果用户有 'edit' 权限，则显示 "Edit" 按钮。

• v-if="hasPermission('delete')"：如果用户有 'delete' 权限，则显示 "Delete" 按钮。

• v-if="hasPermission('view')"：如果用户有 'view' 权限，则显示 "View" 按钮。

4. 动态更新权限

如果权限是动态变化的（例如，从后端 API 获取），你可以使用 watch 或 onMounted 等生命周期钩子来更新 userPermissions。

vue复制代码

<script setup>

import { ref, onMounted } from 'vue';

import axios from 'axios'; // 假设我们使用 axios 来获取数据



const userPermissions = ref([]);



async function fetchUserPermissions() {

try {

const response = await axios.get('/api/user/permissions');

userPermissions.value = response.data;

} catch (error) {

console.error('Failed to fetch user permissions:', error);

}

}



onMounted(fetchUserPermissions);



function hasPermission(permission) {

return userPermissions.value.includes(permission);

}

</script>

在这个扩展的示例中，我们使用 axios 从后端 API 获取用户权限，并在组件挂载时调用 fetchUserPermissions 方法。

通过这种方式，你可以灵活地根据用户的权限动态显示不同的按钮或其他 UI 元素。

写成工具类的方式 。

在 Vue 3 项目中，如果你需要在多个地方使用验证权限的方法，最好将其封装成一个可复用的工具类或组合式 API 函数。以下是一个简单的示例，展示了如何创建一个权限验证的工具类，并在多个组件中使用它。

1. 创建权限验证工具类

首先，你可以在一个单独的文件中（例如 usePermissions.js）定义这个工具类。这个文件将导出一个组合式 API 函数，用于检查用户是否有特定的权限。

javascript复制代码

// usePermissions.js

import { ref, computed } from 'vue';



export function usePermissions(permissions = []) {

const userPermissions = ref(permissions);



// 提供一个方法来更新用户权限（可选）

function updatePermissions(newPermissions) {

userPermissions.value = newPermissions;

}



// 提供一个计算属性来检查是否有特定权限 这个计算属性要删除。实际代码这个删除了。不然报错

const hasPermission = computed((permission) => {

return userPermissions.value.includes(permission);

}).bind(null); // 注意：这里需要绑定 null，因为 computed 默认会绑定到当前实例，但在这里我们不需要



// 但是，由于 computed 不能直接作为函数传递参数（它会返回一个响应式对象），

// 我们需要稍微改变一下策略，返回一个函数来检查权限。

function checkPermission(permission) {

return userPermissions.value.includes(permission);

}



// 返回更新权限的方法和检查权限的函数

return {

updatePermissions,

checkPermission,

};

}



// 注意：上面的 hasPermission 计算属性方法在这里不适用，因为我们需要一个直接返回布尔值的函数。

// 因此，我们使用了 checkPermission 函数来代替。

然而，上面的 hasPermission 计算属性的用法是不正确的，因为 computed 不能直接作为函数传递参数并在模板中使用（它会返回一个响应式对象，而不是一个函数）。因此，我们使用了 checkPermission 函数来替代。

2. 在组件中使用权限验证工具类

现在，你可以在任何组件中导入并使用这个工具类来检查权限。

vue复制代码

<template>

<div>

<button v-if="permissions.checkPermission('edit')">Edit</button>

<button v-if="permissions.checkPermission('delete')">Delete</button>

<button v-if="permissions.checkPermission('view')">View</button>

</div>

</template>



<script setup>

import { ref, onMounted } from 'vue';

import axios from 'axios';

import { usePermissions } from './usePermissions'; // 假设 usePermissions.js 在同一目录下



// 假设这是从某个 API 获取的用户权限（这里使用 ref 来模拟异步获取）

const initialPermissions = ref([]);



// 使用 usePermissions 钩子来获取权限检查功能

const permissions = usePermissions(initialPermissions.value);



// 在组件挂载时获取用户权限

onMounted(async () => {

try {

const response = await axios.get('/api/user/permissions');

permissions.updatePermissions(response.data); // 更新权限

} catch (error) {

console.error('Failed to fetch user permissions:', error);

}

});

</script>



<style scoped>

/* 样式可以根据需要添加 */

</style>

注意事项

1. 权限更新：上面的 updatePermissions 方法允许你更新用户权限。但是，请注意，由于 Vue 的响应式系统，当你更新 userPermissions 时，任何依赖于这些权限的组件都会重新渲染。

2. 性能考虑：如果你有很多权限检查，并且这些权限在组件的生命周期内不会改变，那么你可以考虑将这些权限检查的结果缓存起来，以避免不必要的性能开销。

3. 错误处理：在实际应用中，你应该添加更多的错误处理逻辑，比如处理 API 请求失败的情况，以及处理权限数据格式不正确的情况。

4. 全局状态管理：如果你的应用比较复杂，并且多个组件需要共享权限数据，你可能需要考虑使用 Vuex 或 Pinia 这样的全局状态管理库来管理权限状态。