【Vue3+Ts项目】硅谷甄选 — 菜单权限+按钮权限

一、菜单权限

1.1 路由拆分 

 将项目路由拆分为:

  • 静态路由:login、404、home、screen
  • 异步路由:权限管理(包含三个子路由)、商品管理(包含四个子路由)
  • 任意路由:任意路由

 src/router/routes.ts

// 对外暴露配置路由(常量路由):全部用户都可以访问到的路由
export const constantRoute = [{// 登录path: '/login',component: () => import('@/views/login/index.vue'),name: 'login',meta: {title: '登录', // 菜单标题hidden: true, // 代表路由标题在菜单中是否隐藏  true:隐藏  false:显示icon: 'Promotion', // 菜单文字左侧的图标,支持element-plus全部图标},},{// 登录成功以后展示数据的路由path: '/',component: () => import('@/layout/index.vue'),name: 'layout',meta: {title: '',hidden: true,icon: '',},redirect: '/home',children: [{path: '/home',component: () => import('@/views/home/index.vue'),name: 'home',meta: {title: '首页',hidden: false,icon: 'HomeFilled',},},],},{// 404path: '/404',component: () => import('@/views/404/index.vue'),name: '404',meta: {title: '404',hidden: true,icon: 'BrushFilled',},},{path: '/screen',component: () => import('@/views/screen/index.vue'),name: 'Screen',meta: {title: '数据大屏',hidden: false,icon: 'Platform',},}
]//异步路由
export const asnycRoute = [{path: '/acl',component: () => import('@/layout/index.vue'),name: 'Acl',meta: {title: '权限管理',icon: 'Lock',},redirect: '/acl/user',children: [{path: '/acl/user',component: () => import('@/views/acl/user/index.vue'),name: 'User',meta: {title: '用户管理',icon: 'User',},},{path: '/acl/role',component: () => import('@/views/acl/role/index.vue'),name: 'Role',meta: {title: '角色管理',icon: 'UserFilled',},},{path: '/acl/permission',component: () => import('@/views/acl/permission/index.vue'),name: 'Permission',meta: {title: '菜单管理',icon: 'Monitor',},},],},{path: '/product',component: () => import('@/layout/index.vue'),name: 'Product',meta: {title: '商品管理',icon: 'Goods',},redirect: '/product/trademark',children: [{path: '/product/trademark',component: () => import('@/views/product/trademark/index.vue'),name: 'Trademark',meta: {title: '品牌管理',icon: 'ShoppingCartFull',},},{path: '/product/attr',component: () => import('@/views/product/attr/index.vue'),name: 'Attr',meta: {title: '属性管理',icon: 'ChromeFilled',},},{path: '/product/spu',component: () => import('@/views/product/spu/index.vue'),name: 'Spu',meta: {title: 'SPU管理',icon: 'Calendar',},},{path: '/product/sku',component: () => import('@/views/product/sku/index.vue'),name: 'Sku',meta: {title: 'SKU管理',icon: 'Orange',},},],},
]//任意路由
export const anyRoute = {// 任意路由path: '/:pathMatch(.*)*',redirect: '/404',name: 'Any',meta: {title: '任意路由',hidden: true,icon: 'Wallet',},
}

1.2  菜单权限业务实现 

 PS:退出登录记得删除添加的路由,防止切换角色后还能访问另一个角色的权限

src/store/modules/user.ts

......
// 引入路由(常量路由)
import { constantRoute, asnycRoute, anyRoute } from '@/router/routes'// 引入深拷贝方法
//@ts-expect-error
import cloneDeep from 'lodash/cloneDeep'
import router from '@/router'
// 用于过滤当前用户需要展示的异步路由
function filterAsyncRoute(asnycRoute: any, routes: any) {return asnycRoute.filter((item: any) => {if (routes.includes(item.name)) {if (item.children && item.children.length > 0) {item.children = filterAsyncRoute(item.children, routes)}return true}})
}
......const useUserStore = defineStore('User', {// 小仓库存储数据的地方state: (): UserState => {return {......menuRoutes: constantRoute, // 仓库存储生成菜单需要数组(路由)   removeRouteCallbackList: []}},// 异步|逻辑的地方actions: {......// 获取用户信息async userInfo() {// 获取用户信息进行存储仓库当中(用户头像、名字)let result: userInfoResponeData = await reqUserInfo()// 如果获取信息成功,存储下用户信息if (result.code === 200) {this.username = result.data.namethis.avatar = result.data.avatar// 计算当前用户需要展示的异步路由const userAsyncRoute = filterAsyncRoute(cloneDeep(asnycRoute),result.data.routes)// 菜单需要的数据整理完毕this.menuRoutes = [...constantRoute, ...userAsyncRoute, anyRoute]// 目前路由器管理的只有常量路由:用户计算完毕异步路由、任意路由动态追加;[...userAsyncRoute, anyRoute].forEach((route: any) => {let removeRoute = router.addRoute(route)this.removeRouteCallbackList.push(removeRoute)})return 'ok'} else {return Promise.reject(new Error(result.message))}},// 退出登录async userLogout() {let result: any = await reqLogout()if (result.code === 200) {// 目前没有mock接口:退出登录接口(通知服务器本地用户唯一标识失败)this.token = ''this.username = ''this.avatar = ''REMOVE_TOKEN()// 退出登录时删除登录添加的路由this.removeRouteCallbackList.forEach((removeRouteCallback: any) => {removeRouteCallback()})return 'ok'} else {return Promise.reject(new Error(result.message))}},},getters: {},
})

刷新的时候是异步路由,有可能获取到用户信息,异步路由还没有加载完毕,出现空白的效果!!

解决方法:在全局前置守卫中,获取用户信息后改成next({...to})

  • next() :直接放行(这种写法会导致刷新产生空白的效果)
  • next({...to}):等待路由加载完毕再放行

src/permission.ts

......try {// 获取用户信息await useStore.userInfo()// 放行//等待路由加载完毕再放行next({ ...to})} catch (error) {}.......

 二、按钮权限

1.1 按钮权限业务实现 

1.1.1 用户按钮权限信息存储

src/store/modules/user.ts 

......
state: (): UserState => {return {......//存储当前用户是否包含某一个按钮buttons: [],}
......
async userInfo() {......// 如果获取信息成功,存储下用户信息if (result.code === 200) {......this.buttons = result.data.buttons......}

 1.1.2 定义全局自定义指令

src/directive/has.ts 

import pinia from "@/store"
import useUserStore from "@/store/modules/user"
const userStore = useUserStore(pinia)
export const isHasButton = (app: any) => {// 获取对应的用户仓库// 全局自定义指令:实现按钮的权限app.directive('has', {// 代表使用这个全局指令的DOM|组件挂载完毕的时候会执行一次mounted(el: any, options: any) {// 自定义指令右侧的数值:如果在用户信息buttons数组中没有// 从DOM树上干掉if (!userStore.buttons.includes(options.value)) {el.parentNode.removeChild(el)}},})
}

 在main.ts文件中引入自定义指令文件

// 引入自定义指令文件
import { isHasButton } from '@/directive/has'
isHasButton(app)

 1.1.3 使用自定义指令配置按钮权限

PS:此处以其中一个按钮作为例子,项目中其他按钮的权限都需要配置

<el-button type="primary" size="default" icon="Plus" @click="addTrademark" v-has="'btn.Trademark.add'">

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/635609.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

「优选算法刷题」:有效三角形的个数

一、题目 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 1: 输入: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使用第一个 2) 2,3,4 (使用第二个 2) 2,2,3示例 2: 输入: nums [4,2,3,4] 输出: 4二、思路解析 这道…

扎克伯格宣布将购买35万个GPU

Meta公司马克.扎克伯格1月18日在Instagram上发表文章称&#xff0c;该公司正在加强人工智能研究团队的力量&#xff0c;并在充实AI基础设施“弹药库“&#xff0c;计划在今年年底前向芯片设计商英伟达购买35万个H100 GPU芯片&#xff0c;从而使该公司的GPU总量达到约60万个&…

迪菲赫尔曼密钥交换详细介绍

由于这个问题涉及到一个“原根”的概念&#xff0c;首先先简单介绍一下原根是什么&#xff1a; 原根是数论中的一个概念&#xff0c;它在模运算中具有特殊性质。假设有一个正整数m和另一个整数a&#xff0c;如果a与m互质&#xff08;即它们的最大公约数为1&#xff09;&#x…

利用预训练模型SKEP进行情感分析

项目地址&#xff1a;文本情感分析 - 飞桨AI Studio星河社区 (baidu.com) baidu/Senta: Baidus open-source Sentiment Analysis System. (github.com) 本项目将详细全面介绍情感分析任务的两种子任务&#xff0c;句子级情感分析和目标级情感分析。 同时演示如何使用情感分析…

线性规划案例分享

今天想写一个最优传输的简单实现&#xff0c;结果学歪了&#xff0c;学到线性规划去了&#xff0c;这里我发现了一个宝藏网站 虽然是讲计量经济的&#xff0c;但是里面提供的公式和代码我很喜欢&#xff0c;有时间可以好好读一下 https://python.quantecon.org/lp_intro.html …

【Guava笔记01】Guava Cache本地缓存的常用操作方法

这篇文章,主要介绍Guava Cache本地缓存的常用操作方法。 目录 一、Guava Cache本地缓存 1.1、引入guava依赖 1.2、CacheBuilder类 1.3、Guava-Cache使用案例

如何一键部署本地Java项目到服务器上

一、背景 我开发了一个Java代码&#xff0c;现在想部署到服务器上&#xff0c;当然可以使用Jenkins部署&#xff0c;但是Jenkins配置和维护成本比较高&#xff0c;所以我今天分享的是轻量级的一键部署脚本 演示&#xff1a;本地Window的Java代码 -> Vmware虚拟机Centos7上…

面试题:RabbitMQ 有哪几种消息模式?

文章目录 前言核心组成Rabbitmq 消息模式3.1 Simple 模式ProductorCustomer 3.2 Fanout 模式ProductorCustomer 3.3 Direct 模式Productor 3.4 Topic 模式Productor 3.5 Work 模式3.5.1 轮询分发ProductorWorker1 3.5.2 公平分发Worker1 防止消息丢失机制4.1 消息确认4.2 持久化…

在WIN从零开始在QMUE上添加一块自己的开发板(一)

文章目录 一、前言二、源码编译&#xff08;一&#xff09;安装Msys2&#xff08;二&#xff09;配置GCC工具链&#xff08;三&#xff09;安装QEMU构建依赖&#xff08;四&#xff09;下载编译QEMU源码 二、QUME编程基础&#xff08;一&#xff09;QOM机制&#xff08;二&…

十种较流行的网络安全框架及特点分析

文章目录 前言一、CIS关键安全控制二、COBIT三、CSA云控制矩阵&#xff08;CCM&#xff09;四、NIST网络安全框架&#xff08;CSF&#xff09;五、TARA六、SOGP七、OCTAVE八、ISO / IEC 27001:2022九、HITRUST CSF十、PCI DSS 前言 网络安全框架主要包括安全控制框架&#xff…

LabVIEW振动筛螺栓松动故障诊断

LabVIEW振动筛螺栓松动故障诊断 概述&#xff1a;利用LabVIEW解决振动筛螺栓松动的故障诊断问题。通过集成的方法&#xff0c;不仅提高了故障检测的准确性&#xff0c;还优化了维护流程&#xff0c;为类似的机械设备故障提供了可靠的解决方案。 由于工作条件复杂&#xff0c;…

Linux系统安装NFS服务器

NFS是一种网络文件系统&#xff0c;英文全称Network File System&#xff0c;通过NFS可以让不同的主机系统之间共享文件或目录。通过NFS&#xff0c;用户可以直接在本地NFS客户端读写NFS服务端上的文件&#xff0c;是非常好的共享存储工具。本篇文章将介绍如何在CentOS7上安装N…

android 开发 W/TextToSpeech: speak failed: not bound to TTS engine

问题 笔者使用TTS(TextToSpeech)对于文本内容进行语音播报&#xff0c;控制台报错 android 开发 speak failed:not bound to TTS engine详细问题 笔者核心代码&#xff1a; import android.os.Bundle; import android.speech.tts.TextToSpeech; import android.speech.tts.…

git rev-parse v406 ‘v4.0.4‘^{} master什么意思?

git rev-parse 是一个 Git 命令&#xff0c;用于解析出 git 对象&#xff08;如分支、标签、提交等&#xff09;的完整 SHA-1 哈希值。这个命令对于理解 git 中各种引用的内部表示非常有用。 让我们一步步分析 git rev-parse v406 v4.0.4^{} master 这条命令&#xff1a; v406…

[嵌入式软件][入门篇][仿真平台] STM32F103实现LED、按键

上一篇&#xff1a;[嵌入式软件][入门篇] 搭建在线仿真平台(STM32) 文章目录 一、点亮LED灯(1) 简介(2) 示例代码(3) 仿真效果&#xff08;闪烁&#xff09; 二、按键检测(1) 简介1. 按键原理2. 检测按键端口3. 消抖 (2) 示例代码1 &#xff08;按下点亮&#xff0c;松开熄灭&a…

微信小程序海报插件Painter 2.0(canvas画图)使用并保存图片到相册案例

一、下载与引入 Painter通过 json 数据形式&#xff0c;来进行动态渲染并绘制出图片。 Painter 的优势 功能全&#xff0c;支持文本、图片、矩形、qrcode 类型的 view 绘制布局全&#xff0c;支持多种布局方式&#xff0c;如 align&#xff08;对齐方式&#xff09;、rotate&…

一个简单的Web程序(详解创建一个Flask项目后自带的一个简单的Web程序)

程序代码截图如下&#xff1a; 1.应用初始化 在创建 Flask 程序时&#xff0c;通常需要先创建一个应用实例进行应用初始化。 from flask import Flask # 应用的初始化 app Flask(__name__) 上述代码中&#xff0c;使用 Flask 类创建了一个应用实例 app。 __name__ 参数用…

理解 Stable Diffusion、模型检查点(ckpt)和变分自编码器(VAE)

前言 在探索深度学习和人工智能领域的旅途中&#xff0c;理解Stable Diffusion、模型检查点(ckpt)以及变分自编码器(VAE)之间的关系至关重要。这些组件共同构成了当下一些最先进图像生成系统的基础。本文将为初学者提供一个详细的概述&#xff0c;帮助您理解这些概念以及它们是…

mp4文件可以转成mp3音频吗

现在是个非常流行刷短视频一个年代&#xff0c;刷短视似乎成了人们休闲娱乐的一种方式&#xff0c;在日常刷短视频过程中&#xff0c;肯定会有很多同学被短视频 bgm 神曲洗脑&#xff0c;比如很多被网红翻唱带火的歌曲&#xff0c;例如其中"不负人间”&#xff0c;就是其中…

Python 散点图的绘制(Seaborn篇-03)

Python 散点图的绘制(Seaborn篇-03)         🍹博主 侯小啾 感谢您的支持与信赖。☀️ 🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹꧔ꦿ🌹…