当前位置：首页 > news >正文

Vue_Router权限控制：不同角色显示不同路由

news 来源：原创 2025/8/3 23:04:47

写在前面

在Vue中，Router是一个官方提供的用于处理应用程序路由的插件。它允许我们创建单页应用程序（SPA），其中不同的页面和组件可以通过URL进行导航和展示。使我们可以轻松地创SPA，并实现可复用和可组合的组件导航。

在实际开发中，我们常常会碰到不同角色进入系统所展示的路由，和页面是不同的。那么我们该如何实现router的权限控制呢?

1.pinia配置

我们使用pinia来存储用户信息及权限，在登录时进行调用设置，同时也是router权限判断的依据

import { defineStore } from 'pinia'
import { ref } from 'vue'export const userPermissionsStore = defineStore('userPermissions', () => {const roles = ref('')  // 角色const permissions = ref([])  // 权限const isLogin = ref(false)  //登录状态// 设置状态（传入的权限信息赋值给该状态）const setUserPermissions = (params) => {userPermissions.value = params}return {isLogin,userPermissions,roles,setUserPermissions,}
})

2.router配置

在router配置中我们对需要权限限制的路由进行路由权限和受访问权限角色的设置，同时配置路由守卫用于判断跳转路由前是否有权限

import { createWebHistory, createRouter } from 'vue-router'
import { userPermissionsStore } from '../store'
import Layout from '../View/Layout.vue'const router = createRouter({history: createWebHistory(),routes: [{path: '/',component: Layout,redirect: '/home',children: [{path: '/home',component: () => import('../View/home.vue'),},{path: '/admin',component: () => import('../View/adminPage.vue'),meta: {requireAuth: true, // 需要路由权限roles: ['admin'],  // 受访问权限的角色},},{path: '/superAdmin',component: () => import('../View/superAdminPage.vue'),meta: {requireAuth: true, // 需要路由权限roles: ['superAdmin'], // 受访问权限的角色},},{path: '/user',component: () => import('../View/user.vue'),},],},{path: '/login',component: () => import('../View/login.vue'),},{path: '/404',component: () => import('../View/404.vue'),},],
})// 添加路由前置守卫
router.beforeEach((to, from, next) => {const store = userPermissionsStore()// 判断该路由是否需要登录权限if (to.meta.requireAuth) {// 校验用户是否已经登录if (store.isLogin) {// 判断当前用户是否有访问该路由的权限if (to.meta.roles.includes(store.roles)) {// 用户有访问权限，直接进入页面next() } else {// 用户无访问权限，跳转到其他页面next('/404') }} else {// 如果用户未登录，则跳转到登录页面next('/login')}}
})export default router

3.RouterLink配置

我们可以根据当前角色和权限来控制RouterLink的显隐

<template><ul class="nav"><RouterLink to="/">首页</RouterLink><RouterLink to="/superAdmin" v-if="hasPermission('superAdmin')" >超级管理员显示</RouterLink><RouterLink to="/admin" v-if="hasPermission('admin')">管理员显示</RouterLink><RouterLink to="/user">用户显示</RouterLink><li><button @click="quiteLogin">退出登录</button></li></ul><div class="container"><RouterView /></div>
</template><script setup>
import { RouterLink, useRouter } from 'vue-router'
import { userPermissionsStore } from '../store'
import { onMounted } from 'vue'const store = userPermissionsStore()
const router = useRouter()// 判断当前的角色是否可访问 来控制跳转链接的显隐
const hasPermission = (i) => {return store.permissions.includes(i)
}// 退出登录时将Piain存储的值清空
const quiteLogin = () => {router.push('/login')store.permissions= []store.isLogin = false
}// 判断当前是否登录
onMounted(() => {if (!isLogin.value) {router.push('/login')}
})</script>

4.登录页配置

在登陆时来调用pinia来存储相关数据

<template><div><select v-model="name"><option value="superAdmin">超级管理员</option><option value="admin">管理员</option><option value="user">用户</option></select><button @click="login">登录</button></div>
</template><script setup>
import { ref } from 'vue'
import { userPermissionsStore } from '../store'
import { useRouter } from 'vue-router'const userPermissions = userPermissionsStore()
const name = ref('')
const router = useRouter()const login = () => {userPermissions.isLogin = trueuserPermissions.roles = name.valueuserPermissions.userPermissions.push(name.value)router.push('/')
}
</script>

效果展示

Vue_Router权限控制：不同角色显示不同路由

写在前面在Vue中，Router是一个官方提供的用于处理应用程序路由的插件。它允许我们创建单页应用程序（SPA），其中不同的页面和组件可以通过URL进行导航和展示。使我们可以轻松地创SPA，并实现可复用和可组合的组件…...

编程日记 2025/8/3 23:04:47

机器学习4

九、线性回归 1、概念假设存在多个点，需要使用一条线来保障尽量拟合这些点，寻找这条线的过程就叫回归。机器学习中一种有监督学习的算法,回归问题主要关注的是因变量(需要预测的值)和一个或多个数值型的自变量(预测变量)之间的关系。 2、损失…...

编程日记 2025/8/3 22:54:49

Linux中系统的延迟任务及定时任务

一、延时任务 at 命令，即用即消如 at 11：30 rm -rf /mnt/* ctrld运行 （过一秒即可执行） -v 使用较明显的时间格式，列出at调度中的任务列表 -l 可列出目前系统上面的所有该用户的at调度 -c 可以列出后面接…...

编程日记 2025/8/3 21:29:30

从Stream的 toList() 和 collect(Collectors.toList()) 方法看Java的不可变流

环境 JDK 21Windows 11 专业版IntelliJ IDEA 2024.1.6 背景在使用Java的Stream的时候，常常会把流收集为List。假设有List list1 如下： var list1 List.of("aaa", "bbbbbb", "cccc", "d", "eeeee&qu…...

编程日记 2025/8/3 22:55:33

1.安装docker [rootlocalhost ~]# hostnamectl set-hostname master [rootlocalhost ~]# bash [rootmaster ~]# mv /etc/yum.repos.d/* /home [rootmaster ~]# curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos-7.repo [rootmaster ~]# cu…...

编程日记 2025/8/3 13:44:26

Notepad++--在开头快速添加行号

原文网址：Notepad--在开头快速添加行号_IT利刃出鞘的博客-CSDN博客简介本文介绍Notepad怎样在开头快速添加行号。需求原文件想要的效果方法 1.添加点号 Alt鼠标左键，从首行选中首列下拉，选中需要添加序号的所有行的首列&#xff…...

编程日记 2025/8/3 22:57:22

如何在 PyCharm 中配置 HTTP 代理以确保网络连接的顺畅性

如何在 PyCharm 中配置 HTTP 代理以确保网络连接的顺畅性在配置 PyCharm 的 HTTP 代理以确保网络连接的顺畅性时，需按照一定的步骤进行设置，这不仅有助于确保 PyCharm 能够顺利访问互联网资源，还能保证插件和工具的正常更新与同步。以下是详…...

编程日记 2025/7/28 3:41:42

查找萤石云IOS Sdk中的编解码接口

2021/1/20 以前的时候，碰到的问题，想把萤石云视频介入到TRTC，但是... 萤石云的IOS接口中没有相应的解码播放库，也就是找不到PlayerSDK对应部分，怎么做呢？ 一个是坐等萤石云开放这部分接口，可能…...

编程日记 2025/8/3 23:00:35

webpack配置

4-3vue-loader测试_哔哩哔哩_bilibili 一.新建文件夹vue_todo，vscode打开二.ctrl打开终端，输入npm init -y，快速生成一个默认的package.json文件之后左边出现项目初始化文件package.json 三.接下来需要webpack完成打包，所以安装…...

编程日记 2025/8/3 22:57:20

Streamlit + AI大模型API实现视频字幕提取

简介在本文中，我将带你探讨如何使用Streamlit和AI大模型API来实现视频字幕提取的技术。Streamlit是一个开源的Python库，用于快速构建数据应用的Web界面，而AI大模型API，如OpenAI，提供了强大的语言处理能力&#xff0c…...

编程日记 2025/8/3 23:00:38

11.21 深度学习-tensor常见操作

import torch from PIL import Image from torchvision import transforms # 获取元素值 tensor.item() 返回一个数值只能是tensor里面有一个数字的 # 我们可以把单个元素tensor转换为Python数值，这是非常常用的操作 # tensor 里面超过了1个数字就不行 def g…...

编程日记 2025/7/30 21:21:40

gitlab和jenkins连接

一：jenkins 配置安装gitlab插件生成密钥 id_rsa 要上传到jenkins，id_rsa.pub要上传到gitlab cat /root/.ssh/id_rsa 复制查看的内容可以看到已经成功创建出来了对于gitlab的认证凭据二：配置gitlab cat /root/.ssh/id_rsa.pub 复制查…...

编程日记 2025/8/3 22:55:35

从视频帧生成点云数据、使用PointNet++模型提取特征，并将特征保存下来的完整实现。

文件地址 https://github.com/yanx27/Pointnet_Pointnet2_pytorch?spm5176.28103460.0.0.21a95d27ollfze Pointnet_Pointnet2_pytorch\log\classification\pointnet2_ssg_wo_normals文件夹改名为Pointnet_Pointnet2_pytorch\log\classification\pointnet2_cls_ssg "E:…...

编程日记 2025/8/3 22:56:33

vue3 + Element Plus + ts 封装全局的 message、messageBox、notification 方法

本文示例将 Element Plus 中的 ElMessage 消息提示, ElMessageBox 消息弹出框, ElNotification 消息通知方法统一封装到全局 hooks 文件中方便全局调用准备：在项目 src 目录中新建 hooks 目录、然后在 hooks 目录中新建 index.ts （如果你没有使用 ts …...

编程日记 2025/8/3 23:00:35

【人工智能】Python在机器学习与人工智能中的应用

Python因其简洁易用、丰富的库支持以及强大的社区，被广泛应用于机器学习与人工智能（AI）领域。本教程通过实用的代码示例和讲解，带你从零开始掌握Python在机器学习与人工智能中的基本用法。 1. 机器学习与AI的Python生态系统 Pyth…...

编程日记 2025/8/3 22:53:43

linux上安装docker

在 Linux 上安装 Docker 是一个相对简单的过程。以下是针对 Debian 和其他基于 Debian 的发行版（如 Ubuntu）的详细步骤。如果您使用的是其他发行版（如 CentOS 或 Fedora），也可以参考相应的官方文档进行安装。安装 Do…...

编程日记 2025/8/3 22:54:50

LeetCode:1008. 前序遍历构造二叉搜索树

目录题目描述: 代码: 第一种: 第二种: 第三种:分治法题目描述: 给定一个整数数组，它表示BST(即二叉搜索树 )的先序遍历 ，构造树并返回其根。保证对于给定的测试用例，总是有可能找到具有给定需求的二叉搜索树。二叉搜索树是一棵…...

编程日记 2025/8/3 22:54:47

开源远程桌面工具:RustDesk

在远程办公和远程学习日益普及的今天，我们经常需要远程访问办公电脑或帮助他人解决电脑问题。市面上的远程控制软件要么收费昂贵，要么需要复杂的配置，更让人担心的是数据安全问题。最近我发现了一款名为 RustDesk 的开源远程桌面工具&…...

编程日记 2025/7/30 17:47:02

nfs服务器--RHCE

一，简介 NFS（Network File System，网络文件系统）是FreeBSD支持的文件系统中的一种，它允许网络中的计算机（不同的计算机、不同的操作系统）之间通过TCP/IP网络共享资源，主要在unix系…...

编程日记 2025/8/3 22:55:35

使用 Elastic 3 步实现基于 OTel 的原生 K8s 和应用可观测性

作者：来自 Elastic Bahubali Shetti Elastic 的 OpenTelemetry 发行版现已支持 OTel Operator，可使用 EDOT SDK 自动检测应用程序，并管理 EDOT OTel Collector 的部署和生命周期以实现 Kubernetes 可观察性。了解如何通过 3 个简单步骤进行配…...

编程日记 2025/8/3 22:56:34

Vue3-小兔鲜项目出现问题及其解决方法（未写完）

基础操作 （1）使用create-vue搭建Vue3项目要保证node -v 版本在16以上 （2）添加pinia到vue项目 npm init vuelatest npm i pinia //导入creatPiniaimport {createPinia} from pinia//执行方法得到实例const pinia createPinia()…...

编程日记 2025/8/3 23:01:26

【mysql】锁机制 - 3.意向锁

意向锁（Intension Lock） 是为了提高粗粒度锁性能而设置的一种预判机制，即在一个操作发起实际资源的锁申请行为之前，先对更粗力度的资源发起一个加锁意向声明。为什么需要意向锁？ 比如对于以下操作： 事务…...

编程日记 2025/8/3 22:54:48

Nuxt3 动态路由URL不更改的前提下参数更新，NuxtLink不刷新不跳转，生命周期无响应解决方案

Nuxt3 动态路由URL不更改的前提下参数更新，NuxtLink不刷新不跳转，生命周期无响应解决方案首先说明一点，Nuxt3 的动态路由响应机制是根据 URL 是否更改，参数的更改并不会触发 Router 去更新页面，这在 Vue3 上同样存在…...

编程日记 2025/8/3 22:53:40

Spring Boot集成Redis：配置、序列化与持久化

Spring Boot集成Redis：配置、序列化与持久化一、简介什么是Redis Redis是一个开源的、基于内存的高性能键值对存储数据库，支持多种数据结构如字符串、哈希、列表、集合等。它以其卓越的性能、高可用性和持久性而广受欢迎。为什么要使用Redis Red…...

编程日记 2025/8/1 7:18:47

JAVA：探索 PDF 文字提取的技术指南

1、简述随着信息化的发展，PDF 文档成为了信息传播的重要媒介。在许多应用场景下，如数据迁移、内容分析和信息检索，我们需要从 PDF 文件中提取文字内容。JAVA提供了多种库来处理 PDF 文件，其中 PDFBox 和 iText 是最常用的两个。…...

编程日记 2025/8/3 23:00:38

当你项目服务器磁盘报警

当你们公司运维收到这样的邮件，大概率日志文件过大引起的在Linux下如何不停止服务,清空nohup.out文件呢？ nohup.out会一直一直自己增长下去，如果你的服务器硬盘不给力的话，很容易把应用也挂掉（硬盘没空间 &#xff0…...

编程日记 2025/8/3 4:10:34

SpringBoot中Maven的定义及国内源配置教程，实现自动获取Jar包

推荐一个国内镜像API网站，无需信用卡及科学上网即可调用gpt，claude3，gemini等国外模型，感兴趣的可以看下👉：https://api.atalk-ai.com/ SpringBoot中Maven的定义及国内源配置教程，实现自动获取J…...

编程日记 2025/8/3 23:00:37

LSTM 和 LSTMCell

1. LSTM 和 LSTMCell 的简介 LSTM (Long Short-Term Memory): 一种特殊的 RNN（循环神经网络），用于解决普通 RNN 中梯度消失或梯度爆炸的问题。能够捕获长期依赖关系，适合处理序列数据（如自然语言、时间序列等&…...

编程日记 2025/8/2 18:59:12

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现（Kalman Filter）

【卡尔曼滤波】数据预测Prediction观测器的理论推导及应用 C语言、Python实现（Kalman Filter） 更新以gitee为准： 文章目录数据预测概念和适用方式线性系统的适用性数据预测算法和卡尔曼滤波公式推导状态空间方程和观测器先验估计后验估计…...

编程日记 2025/7/28 13:18:48

神经网络问题之一：梯度消失（Vanishing Gradient）

梯度消失（Vanishing Gradient）问题是深度神经网络训练中的一个关键问题，它主要发生在反向传播过程中，导致靠近输入层的权重更新变得非常缓慢甚至几乎停滞，严重影响网络的训练效果和性能。图1 在深度神经网络中容易出现…...

编程日记 2025/8/3 22:57:23

【微软：多模态基础模型】（4）统一视觉模型

欢迎关注[【youcans的AGI学习笔记】](https://blog.csdn.net/youcans/category_12244543.html）原创作品【微软：多模态基础模型】（1）从专家到通用助手【微软：多模态基础模型】（2）视觉理解【微…...

编程日记 2025/8/3 9:26:35

npm | Yarn | pnpm Node.js包管理器比较与安装

一、包管理器比较参考原文链接： 2024 Node.js Package Manager 指南：npm、Yarn、pnpm 比较 — 2024 Node.js Package Manager Guide: npm, Yarn, pnpm Compared (nodesource.com) 以下是对 Node.js 的三个包管理工具 npm、Yarn 和 pnpm 的优缺点总结&am…...

编程日记 2025/7/30 23:34:39

建造者模式

什么是建造者模式？ 建造者模式（Builder Pattern）是一种设计模式，用来一步步创建复杂的对象，而不用直接去调用复杂的构造函数或手动设置大量属性。你可以： • 按步骤“搭建”对象。 • 自由选择要设置的部…...

编程日记 2025/8/2 9:38:21

Spring Boot核心概念：应用配置

Spring Boot提供了强大的配置系统，允许开发者通过配置文件轻松管理应用的配置。支持的主要配置文件格式有两种：application.properties和application.yml。 application.properties与application.yml application.properties和application.yml是Spring…...

编程日记 2025/8/2 17:10:04

linux环境安装cuda toolkit

1 全新安装如果环境中没安装过cuda版本， 这种情况下比较简单。直接在https://developer.nvidia.com/cuda-toolkit-archive选择对应版本下载安装即可。如下为安装cuda toolkit 11.8. 2 环境中已经存在其他版本这种情况下比较复杂一些。首先要确认最高支持的版…...

编程日记 2025/8/3 21:21:51

WebSocket实战，后台修改订单状态，前台实现数据变更，提供前端和后端多种语言

案例场景： 在实际的后台中需要变更某个订单的状态，在官网中不刷新页面，可以自动更新状态在前端页面实现订单状态的实时更新（不刷新页面），可以通过 WebSocket 的方式与后台保持通信，监听订单状态…...

编程日记 2025/7/31 22:33:59

实时通信协议概述：WebRTC、RTP/RTCP、RTMP、HLS 和 FLV 的比较与应用

文章目录一、协议总览二、WebRTC2.1 时序图2.2 代码示例三、RTP/RTCP3.1 时序图3.2 代码示例四、RTMP4.1 时序图4.2 代码示例五、HLS5.1 时序图5.2 代码示例六、总结一、协议总览协议/格式细节对比适用场景用法WebRTC使用 UDP 传输协议，支持 P2P 通信&#…...

编程日记 2025/8/2 23:46:47

Vue路由

目录 1. 安装 vue-router 2. 创建 Vue 项目结构 3. 配置路由 4. 在 main.js 中使用路由 5. 在 App.vue 中添加 6. 创建组件 7. 运行你的应用在 Vue.js 2 中，路由管理通常通过 vue-router 插件来实现。vue-router 是一个官方的路由管理器，允许你…...

编程日记 2025/7/31 9:48:06

uniapp开发微信小程序笔记3-全局配置、导航栏配置、tabBar配置

前言： 本文记录的是微信小程序的全局配置、导航栏配置、tabBar配置一、全局配置： 可以直接查官方文档：pages.json 页面路由 | uni-app官网，有非常详细的文档说明都是在 pages.json里面做配置的，我们可以看到已经有…...

编程日记 2025/8/1 6:48:49

Hash table类算法【leetcode】

哈希表中关键码就是数组的索引下标，然后通过下标直接访问数组中的元素那么哈希表能解决什么问题呢，一般哈希表都是用来快速判断一个元素是否出现集合里。例如要查询一个名字是否在这所学校里。要枚举的话时间复杂度是O(n)，但如果使用哈希…...

编程日记 2025/8/3 21:06:57

多算法模型（BI-LSTM GRU Mamba ekan xgboost）实现功率预测

概述本项目旨在通过结合多算法模型网络实现功率预测。包括数据处理、特征工程、模型训练、模型推理和结果输出，最终结果以 JSON 格式返回。代码地址：代码...

编程日记 2025/8/2 22:24:53

html 图片转svg 并使用svg路径来裁剪html元素

1.png转svg 工具地址: Vectorizer – 免费图像矢量化打开svg图片,复制其中的path中的d标签的路径查看生成的svg路径是否正确在线SVG路径预览工具 - UU在线工具 2.在html中使用svg路径 <svg xmlns"http://www.w3.org/2000/svg" width"318px" height…...

编程日记 2025/7/16 15:29:33

贴代码框架PasteForm特性介绍之select,selects,lselect和reload

简介 PasteForm是贴代码推出的 “新一代CRUD” ，基于ABPvNext，目的是通过对Dto的特性的标注，从而实现管理端的统一UI，借助于配套的PasteBuilder代码生成器，你可以快速的为自己的项目构建后台管理端！目前管…...

编程日记 2025/7/29 22:51:58

【Redis】实现异步秒杀功能

一、将判断条件提前缓存到redis中将判断条件缓存到redis中，如果判断成功直接操作redis中的数据，然后将数据写入redis，如果成功返回一个值。然后根据这个值判断是否成功，如果成功把用户id，优惠卷id，订单id存…...

编程日记 2025/7/31 16:12:45

React的API✅

createContext createContext要和useContext配合使用，可以理解为 “React自带的redux或mobx” ，事实上redux就是用context来实现的。但是一番操作下来我还是感觉，简单的context对视图的更新的细粒度把控比不上mobx，除非配合memo等…...

编程日记 2025/8/1 1:33:17

2024亚太杯数学建模C题【Development Analyses and Strategies for Pet Industry 】思路详解

C：宠物行业及相关产业的发展分析与战略随着人们消费观念的发展，宠物行业作为一个新兴产业，正在全球范围内逐渐积聚势头，这得益于快速的经济发展和人均收入的提高。1992年，中国小动物保护协会成立，随后1993…...

编程日记 2025/8/2 18:28:18

使用Notepad++工具去除重复行

使用Notepad工具去除重复行参考链接：https://blog.csdn.net/londa/article/details/108981396 一、使用正则表达式 1、对文本进行排序，让重复行排在一起 2、使用正则表达式替换（注意）^(.*?)$\s?^(?.*^\1$) 在替换时选择正…...

编程日记 2025/7/17 1:22:11