首页 > 其他分享 >Vue3自定义指令实现权限控制

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

时间:2024-03-12 11:25:35浏览次数:27  
标签:const 自定义 permission app 指令 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的自定义指令,它有两个钩子函数:bindupdatebind钩子在指令第一次绑定到元素时调用,用于初始化元素的显示状态。update钩子在组件更新时调用,允许根据新的权限信息更新元素的显示状态。

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

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

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

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

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

标签:const,自定义,permission,app,指令,Vue3,权限
From: https://www.cnblogs.com/bokemoqi/p/18067880

相关文章

  • SpringBoot自定义validation注解校验参数只能为指定的值
    需求:实体类中某个属性的值必须为指定的值,比如0或者1SpringBoot版本:2.4.8validation 依赖<!--数据校验--><dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-validation</artifactId></dependency>......
  • 创建Vue3+Vite+TypeScript项目
    一、安装node环境,安装18.0或更高版本的Node.js  推荐使用nvm管理node版本:一看就会使用nvm实现多个版本的node自由切换-始是逍遥人-博客园(cnblogs.com)二、创建项目  1、选择一个工作路径,如:E:\webproject  2、打开cmd命令窗口进入到当前目录    快捷方式:直接......
  • vue3—尚硅谷禹神笔记转载
    1.Vue3简介2020年9月18日,Vue.js发布版3.0版本,代号:OnePiece(n经历了:4800+次提交、40+个RFC、600+次PR、300+贡献者官方发版地址:Releasev3.0.0OnePiece·vuejs/core截止2023年10月,最新的公开版本为:3.3.41.1.【性能的提升】打包大小减少41%。初次渲染快5......
  • vue3 父子组件间通讯
    1、父组件向子组件传值父组件<fitSteps:stepActive="stepActive"><div>插槽信息</div>      <van-buttontype="primary"@click="FatherClick">下一步</van-button></fitSteps>conststepActive=ref......
  • Qt 自定义控件
    参考:https://blog.csdn.net/danshiming/article/details/134383612https://blog.csdn.net/u011832219/article/details/128531359 1、创建自定义控件新建qt项目(项目1),选择其他项目中的“Qt设计师自定义控件”,构建套件的版本类型需要与'帮助'列表中'AboutQtCreator'弹窗的......
  • Java登陆第三十四天——使用Vite创建工程化的Vue3项目
    VueVue是基于标准HTML、CSS和JavaScript构建的前端框架,可以更高效地开发前端页面。ViteVite是Vue团队开发的项目管理工具。Maven的主要功能引入依赖项目管理使用Maven可以工程化的管理后端代码。npm的主要功能:引入依赖vite的主要功能:项目管理使用npm+vit......
  • uniapp自定义导航栏
    uniapp项目自定义顶部导航栏1.创建组件完整代码navigation.vue<template><viewclass="navbar-header":style="isfixed?'padding-top'+navHeight+'px':'padding-top:0px'"><viewclass="navbarcustom......
  • JeecgBoot Vue3前端项目性能优化&按需加载方案
    JeecgBootvue3前端项目在3.5.5版本之前,的确存在很严重的性能问题,大家可以参考以下文档进行升级。按需加载改造方法1、全局注册地方去掉2、组件改成异步注册3、用不到的大组件可以删掉【精简项目方案】大组件1、富文本tinyme2、Markdown3、CodeMirror4、地图数据......
  • vue3 监听鼠标点击拖动事件,移动端滑动事件,页面指针坐标事件
    PointerEventsAPI是Hmtl5的事件规范之一,它主要目的是用来将鼠标(Mouse)、触摸(touch)和触控笔(pen)三种事件整合为统一的API。Pointer指可以在屏幕上反馈一个指定坐标的输入设备。PointerEvent事件和TouchEventAPI对应的触摸事件类似,它继承扩展了TouchEvent,因此拥有TouchEven......
  • RAG实战5-自定义prompt
    RAG实战5-自定义prompt在阅读本文之前,先阅读RAG实战4。在RAG实战4中我们分析了LlamaIndex中RAG的执行过程,同时留下了一个尚待解决的问题:LlamaIndex中提供的prompttemplate都是英文的,该如何使用中文的prompttemplate呢?直接看以下代码:importloggingimportsysimporttorchf......