vue3的路由配置
- 先找到Layout布局文件,从中找到左侧边栏,找到下述代码
<SidebarItem v-for="route in noHiddenRoutes" :key="route.path" :item="route" :base-path="route.path" />/**
*菜单项 <SidebarItem>:
*使用v-for循环遍历noHiddenRoutes数组,为每个路由生成一个<SidebarItem>组件。
*:key="route.path":为每个<SidebarItem>提供唯一的键值,这是Vue中优化DOM更新的一种方式。
*:item="route" 和 :base-path="route.path":将当前路由对象和路径作为属性传递给<SidebarItem>。
*/
- 查看noHiddenRoutes数组
const noHiddenRoutes = computed(() => permissionStore.routes.filter((item) => !item.meta?.hidden))
//从 permissionStore 中获取路由列表,过滤掉 meta.hidden 为 true 的路由,保留未隐藏的路由。
- 查看permissionStore,找到下述与展示路由有关代码
/** 根据角色生成可访问的 Routes(可访问的路由 = 常驻路由 + 有访问权限的动态路由) */const setRoutes = (roles: string[]) => {const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}
- 查看 filterDynamicRoutes 函数
const filterDynamicRoutes = (routes: RouteRecordRaw[], roles: string[]) => {//过滤动态数组console.log(12345)//被打印,说明这个函数被调用const res: RouteRecordRaw[] = []console.log(routes,'4444')routes.forEach((route) => {const tempRoute = { ...route }console.log(333333)//没有被打印,说明两者之间的内容不被执行if (hasPermission(roles, tempRoute)) {if (tempRoute.children) {tempRoute.children = filterDynamicRoutes(tempRoute.children, roles)}res.push(tempRoute)}})return res
}
在12345和333333之间的函数 routes.forEach((route) 作用是遍历 routes 数组,此时我们打印 routes 的值,发现打印结果是个空数组[],说明这个数组没有被传递进来。
- 这个函数是filterDynamicRoutes 的定义,那么我们找到使用这个函数的地方,看入参是什么
/** 根据角色生成可访问的 Routes(可访问的路由 = 常驻路由 + 有访问权限的动态路由) */const setRoutes = (roles: string[]) => {console.log('2222222')const accessedRoutes = filterDynamicRoutes(dynamicRoutes, roles)_set(accessedRoutes)}
我们发现入参 routes 是 dynamicRoutes 动态路由,跳转到 dynamicRoutes 函数,这个函数内 容为空,我们将需要权限才能展示的路由放在动态路由函数内,此时页面不再是空数组

- 然后继续执行if条件句
const hasPermission = (roles: string[], route: RouteRecordRaw) => {//用于检查用户是否有权限访问某个路由const routeRoles = route.meta?.roles//从路由对象的 meta 属性中提取 roles 字段return routeRoles ? roles.some((role) => routeRoles.includes(role)) : true//根据 routeRoles 和 roles 判断用户是否有权限访问该路由
}
最后前端路由按要求role为admin可显示,为editor不可显示
相关文章:
vue3的路由配置
先找到Layout布局文件,从中找到左侧边栏,找到下述代码 <SidebarItem v-for"route in noHiddenRoutes" :key"route.path" :item"route" :base-path"route.path" />/** *菜单项 <SidebarItem>: *使用…...
在彼此的根系里呼吸
爱如草木,需以晨露滋养,而非绳索捆缚。一段健康的亲密关系,恰似两株根系相连却各自向阳的树——风起时枝叶相触,晴空下共享光影,却始终保有向地心深处生长的自由。那些纠缠的根须是信任编织的网,容得下沉默…...
深入理解若依RuoYi-Vue数据字典设计与实现
深入理解若依数据字典设计与实现 一、Vue2版本主要文件目录 组件目录src/components:数据字典组件、字典标签组件 工具目录src/utils:字典工具类 store目录src/store:字典数据 main.js:字典数据初始化 页面使用字典例子…...
深入MapReduce——从MRv1到Yarn
引入 我们前面篇章有提到,和MapReduce的论文不太一样。在Hadoop1.0实现里,每一个MapReduce的任务并没有一个独立的master进程,而是直接让调度系统承担了所有的worker 的master 的角色,这就是Hadoop1.0里的 JobTracker。在Hadoop1…...
Flutter_学习记录_Tab的简单Demo~真的很简单
1. Tab的简单使用了解 要实现tab(选项卡或者标签视图)需要用到三个组件: TabBarTabBarViewTabController 这一块,我也不知道怎么整理了,直接提供代码吧: import package:flutter/material.dart;void main() {runApp(MyApp());…...
CSS核心
CSS的引入方式 内部样式表是在 html 页面内部写一个 style 标签,在标签内部编写 CSS 代码控制整个 HTML 页面的样式。<style> 标签理论上可以放在 HTML 文档的任何地方,但一般会放在文档的 <head> 标签中。 <style> div { color: r…...
Deepseek本地部署(ollama+open-webui)
ollama 首先是安装ollama,这个非常简单 https://ollama.com/ 下载安装即可 open-webui 这个是为了提供一个ui,毕竟我们也不想在cmd和模型交互,很不方便。 第一,需要安装python3.11,必须是3.11(其他版…...
PaddleSeg 从配置文件和模型 URL 自动化运行预测任务
git clone https://github.com/PaddlePaddle/PaddleSeg.git# 在ipynb里面运行 cd PaddleSegimport sys sys.path.append(/home/aistudio/work/PaddleSeg)import os# 配置文件夹路径 folder_path "/home/aistudio/work/PaddleSeg/configs"# 遍历文件夹,寻…...
数据结构 队列
目录 前言 一,队列的基本知识 二,用数组实现队列 三,用链表实现队列 总结 前言 接下来我们将学习队列的知识,这会让我们了解队列的基本概念和基本的功能 一,队列的基本知识 (Queue) 我们先来研究队列的ADT,…...
Cocoa和Cocoa Touch是什么语言写成的?什么是Cocoa?编程语言中什么是框架?为什么苹果公司Cocoa类库有不少NS前缀?Swift编程语言?
Cocoa和Cocoa Touch是什么语言写成的? 二者主要都是用Objective-C语言编写而成的。 什么是Cocoa? Cocoa是苹果操作系统macOS和iOS上的应用程序开发框架集合,核心语言是Objective-C编程语言,在移动平台被称为Cocoa Touch,Cocoa包含多个子框架…...
登录管理——认证方案(JWT、拦截器、ThreadLocal、短信验证)
两种常见的认证方案 基于Session认证 登录状态信息保存在服务器内存中,若访问量增加,单台节点压力会较大集群环境下需要解决集群中的各种服务器登录状态共享问题 解决方案:将登录状态保存的Redis中,从Redis中查找登录状态 基于…...
Java实现LFU缓存策略实战
LFU算法原理在Java中示例实现集成Caffeine的W-TinyLFU策略缓存实战总结LFU与LRU稍有不同,LFU是根据数据被访问的频率来决定去留。尽管它考虑了数据的近期使用,但它不会区分数据的首次访问和后续访问,淘汰那些访问次数最少的数据。 这种缓存策略主要用来处理以下场景: 数据…...
物业系统改革引领行业智能化管理与提升服务质量的新征程
内容概要 在当今迅速变化的社会中,物业系统改革正在悄然推动行业的智能化管理进程。物业管理作为一个古老而传统的领域,面临着诸多挑战,包括效率低下、业主需求难以满足等。数字化转型为这一现象注入了新活力,帮助物业公司通过先…...
QT+mysql+python 效果:
# This Python file uses the following encoding: utf-8 import sysfrom PySide6.QtWidgets import QApplication, QWidget,QMessageBox from PySide6.QtGui import QStandardItemModel, QStandardItem # 导入需要的类# Important: # 你需要通过以下指令把 form.ui转为ui…...
动手学图神经网络(4):利用图神经网络进行图分类
利用图神经网络进行图分类:从理论到实践 引言 在之前的学习中,大家了解了如何使用图神经网络(GNNs)进行节点分类。本次教程将深入探讨如何运用 GNNs 解决图分类问题。图分类是指在给定一个图数据集的情况下,根据图的一些结构属性对整个图进行分类,而不是对图中的节点进…...
【Block总结】PConv,部分卷积|即插即用
论文信息 标题: Run, Don’t Walk: Chasing Higher FLOPS for Faster Neural Networks 论文链接: https://arxiv.org/pdf/2303.03667 GitHub链接: https://github.com/JierunChen/FasterNet 创新点 该论文的核心创新在于提出了一种新的运算符——部分卷积(PCo…...
接口使用实例(1)
大家好,今天我们来看看接口的一些实例,关于如何定义和实现接口,相信通过这些例子,我们能有一些清晰的认知。 先定义一个学生类: 再给定一个学生数组,对这个对象数组中的元素进行排序(按分数排&…...
动态规划DP 最长上升子序列模型 总览
最长上升子序列模型 1. 最长上升子序列 1.1 怪盗基德的滑翔伞 1.1.1 登山 1.1.2 合唱队形 1.2 友好城市 1.3 最长上升子序列和 1.4 导弹拦截...
网络工程师 (7)进程管理
一、进程相关的概念 (一)定义 进程(Process)是计算机中的程序关于某数据集合上的一次运行活动,是系统进行资源分配和调度的基本单位,也是操作系统结构的基础。进程是程序的一次执行实例,具有动…...
登录授权流程
发起一个网络请求需要:1.请求地址 2.请求方式 3.请求参数 在检查中找到request method,在postman中设置同样的请求方式将登录的url接口复制到postman中(json类型数据)在payload中选择view parsed,将其填入Body-raw中 …...
Windows下Nessus破解版安装全攻略:从下载到解除限制一步到位
Windows系统下Nessus安全扫描工具的正规安装与使用指南 在网络安全领域,漏洞扫描是保障系统安全的重要环节。Tenable Nessus作为业内知名的漏洞扫描工具,以其全面的漏洞检测能力和稳定的性能赢得了众多安全从业者的青睐。本文将详细介绍如何在Windows环境…...
2026知识付费SaaS平台实测对比:创客匠人综合首选,断层领跑行业榜单
随着知识付费市场规模突破千亿大关(数据来源:艾瑞咨询2026年报告),越来越多内容创作者、教培机构和企业涌入这一赛道。但在选择SaaS平台时,用户却面临诸多痛点:功能卡顿影响用户体验、获客成本高企、私域运…...
广州SEO优化对网站转化有什么帮助_广州SEO优化应该注意哪些问题
<h2>广州SEO优化对网站转化有什么帮助</h2> <p>在当今数字化时代,广州SEO优化成为了企业提升在线业务的关键策略。广州作为中国南方的重要城市,其互联网市场竞争激烈,掌握有效的SEO优化手段对于提升网站转化率至关重要。广…...
大模型LLM ACA - ACP认证考试模拟试卷一
目录 一、大模型LLM ACA - ACP认证考试 二、大模型LLM ACA - ACP认证考试模拟试卷 (一)单选题:70 题 1 分 70 分 1. 在代码中,answer_correctness 指标的主要作用是什么? 2. 在ask_llm_route函数中,…...
如何用G-Helper实现CPU降压调优:华硕笔记本用户的散热与续航提升指南
如何用G-Helper实现CPU降压调优:华硕笔记本用户的散热与续航提升指南 【免费下载链接】g-helper Lightweight Armoury Crate alternative for Asus laptops. Control tool for ROG Zephyrus G14, G15, G16, M16, Flow X13, Flow X16, TUF, Strix, Scar and other mo…...
不同品牌路由器也能玩桥接?TP-LINK AC1200主路由+FAST FWR303副路由详细配置指南
跨品牌路由器桥接实战:TP-LINK AC1200与FAST FWR303混合组网全解析 现代家庭网络环境中,信号死角问题如同房间角落的灰尘一样难以避免。特别是当房屋结构复杂或面积较大时,单台路由器往往力不从心。此时,利用家中闲置的旧路由器进…...
AIGlasses_for_navigation 开发环境快速配置:Anaconda虚拟环境指南
AIGlasses_for_navigation 开发环境快速配置:Anaconda虚拟环境指南 你是不是也遇到过这种情况:好不容易在本地跑通了一个项目,换台电脑或者更新了几个库,结果就报了一堆莫名其妙的错误。或者,你想同时维护两个需要不同…...
VideoAgentTrek-ScreenFilter与ComfyUI联动:打造可视化视频过滤节点工作流
VideoAgentTrek-ScreenFilter与ComfyUI联动:打造可视化视频过滤节点工作流 1. 引言 如果你经常用ComfyUI做视频相关的AI实验,可能会遇到一个挺麻烦的事儿:想对视频做一些预处理或者后处理,比如过滤掉某些特定画面,就…...
如何实现Chaos Mesh全链路国际化:从文档到UI的完整指南
如何实现Chaos Mesh全链路国际化:从文档到UI的完整指南 【免费下载链接】chaos-mesh Chaos Mesh 是一个云原生混沌工程平台,用于测试、故障注入和混沌工程。 * 用于混沌工程、故障注入和流量管理、支持 Prometheus 和 Grafana。 * 有什么特点:…...
MiniCPM-V-2_6代码截图理解:函数逻辑分析+注释生成效果展示
MiniCPM-V-2_6代码截图理解:函数逻辑分析注释生成效果展示 1. 引言:当AI能看懂代码截图 你有没有遇到过这样的情况:看到一个复杂的代码截图,想要理解其中的函数逻辑,却需要一行行手动输入代码?或者面对一…...
