Vue3自定义指令实现权限控制

使用Pinia（Vue.js的轻量级状态管理库，是Vuex的替代品）来管理用户权限，并结合自定义指令控制元素的显隐。步骤操作如下：

1、安装Pinia:

npm install pinia

或

yarn add pinia

解释：安装Pinia库，这是一个轻量级的状态管理库，适用于Vue 3。

2、创建Pinia Store:

// stores/user.js
import { defineStore } from 'pinia';

export const useUserStore = defineStore('user', {
  state: () => ({
    permissions: ['admin'] // 初始权限数组，实际应用中可能从后端获取
  }),
  actions: {
    // 你可以在这里添加方法来更新权限信息
    updatePermissions(newPermissions) {
      this.permissions = newPermissions;
    }
  }
});

解释：创建一个名为user的Pinia store，其中包含一个permissions状态用于存储用户的权限列表，以及一个updatePermissions方法用于更新这些权限。

3、在主应用中使用Pinia Store:

import { createApp } from 'vue';
import App from './App.vue';
import { useUserStore } from './stores/user';

const app = createApp(App);
const userStore = useUserStore();

app.use(userStore);
app.mount('#app');

解释：在Vue应用的入口文件中，引入并使用user store。这将使得userStore在整个应用中可用。

4、创建自定义指令:

// main.js 或 main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { useUserStore } from './stores/user';

const app = createApp(App);
const userStore = useUserStore();

// 自定义指令
app.directive('permission', {
  bind(el, binding) {
    // 当指令第一次绑定到元素时调用
    const permission = binding.value; // 获取绑定到指令的值，即权限名称
    const hasPermission = userStore.permissions.includes(permission);

    // 如果用户没有权限，则隐藏元素
    if (!hasPermission) {
      el.style.display = 'none';
    }
  },
  update(el, binding, vnode, oldVnode) {
    // 当组件更新且绑定值可能改变时调用
    const permission = binding.value; // 重新获取权限名称
    const hasPermission = userStore.permissions.includes(permission);

    // 根据用户是否有权限来显示或隐藏元素
    el.style.display = hasPermission ? 'block' : 'none';
  }
});

app.mount('#app');

解释：定义一个名为permission的自定义指令，它有两个钩子函数：bind和update。bind钩子在指令第一次绑定到元素时调用，用于初始化元素的显示状态。update钩子在组件更新时调用，允许根据新的权限信息更新元素的显示状态。

5、在组件中使用自定义指令：

<!-- 只有当用户拥有admin权限时显示 -->
<div v-permission="'admin'">这是管理员区域</div>

<!-- 只有当用户拥有edit权限时显示 -->
<button v-permission="'edit'">编辑内容</button>

解释：在Vue组件的模板中，使用v-permission指令来控制元素的显隐。指令的值是权限名称，元素将根据用户是否具有该权限来显示或隐藏。

​ 通过这些步骤和代码，可以在Vue 3应用程序中使用Pinia进行状态管理，并结合自定义指令来根据用户的权限控制元素的显隐。这种方式使得权限管理逻辑集中且易于维护。