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进行状态管理，并结合自定义指令来根据用户的权限控制元素的显隐。这种方式使得权限管理逻辑集中且易于维护。