vue3 按钮级别权限控制

在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的