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

写在前面       

         在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>

效果展示

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

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

相关文章

设计模式之 适配器模式

适配器模式&#xff08;Adapter Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许将一个类的接口转换成客户端所期望的另一个接口。通过使用适配器模式&#xff0c;原本由于接口不兼容的类可以进行协作。简单来说&#xff0c;适配器模式就是将不兼容的接口连接起来&…

【LLM训练系列02】如何找到一个大模型Lora的target_modules

方法1&#xff1a;观察attention中的线性层 import numpy as np import pandas as pd from peft import PeftModel import torch import torch.nn.functional as F from torch import Tensor from transformers import AutoTokenizer, AutoModel, BitsAndBytesConfig from typ…

05_Spring JdbcTemplate

在继续了解Spring的核心知识前,我们先看看Spring的一个模板类JdbcTemplate,它是一个JDBC的模板类,用来简化JDBC的操作。 接下来以实际来进行说明 一、实例环境准备 数据库及表准备 我们在本地mysql中新增一个数据库test,并新增一张数据表:user create database if not…

萨瑞MCU R7FA8D1BH环境搭建教程

萨瑞MCU R7FA8D1BH环境搭建教程 如果你是大学生 遇到电子技术 学习 成长 入行难题 佳喔威信&#xff0c;给你提供一定资源和战略方法上的帮助 相信我的专业职业经历一定能帮到你 目录 概述 2. 开发板介绍3. 搭建rtthread环境4. 安装瑞萨的keil环境5. 搭建瑞萨的keil辅助环境…

鸿蒙实战:使用显式Want启动Ability

文章目录 1. 实战概述2. 实现步骤2.1 创建鸿蒙应用项目2.2 修改Index.ets代码2.3 创建SecondAbility2.4 创建Second.ets 3. 测试效果4. 实战总结5. 拓展练习 - 启动文件管理器5.1 创建鸿蒙应用项目5.2 修改Index.ets代码5.3 测试应用运行效果 1. 实战概述 本实战详细阐述了在 …

【Nginx】反向代理Https时相关参数:

在Nginx代理后台HTTPS服务时&#xff0c;有几个关键的参数需要配置&#xff0c;以确保代理服务器能够正确地与后端服务器进行通信。一些重要参数的介绍&#xff1a; proxy_ssl_server_name&#xff1a;这个参数用于指定是否在TLS握手时通过SNI&#xff08;Server Name Indicati…

PH热榜 | 2024-11-19

DevNow 是一个精简的开源技术博客项目模版&#xff0c;支持 Vercel 一键部署&#xff0c;支持评论、搜索等功能&#xff0c;欢迎大家体验。 在线预览 1. Layer 标语&#xff1a;受大脑启发的规划器 介绍&#xff1a;体验一下这款新一代的任务和项目管理系统吧&#xff01;它…

React Native 基础

React 的核心概念 定义函数式组件 import组件 要定义一个Cat组件,第一步要使用 import 语句来引入React以及React Native的 Text 组件: import React from react; import { Text } from react-native; 定义函数作为组件 const CatApp = () => {}; 渲染Text组件

一文详细了解websocket应用以及连接断开的解决方案

文章目录 websocketvite 热启动探索websocket -心跳websocket 事件监听应用过程中问题总结 websocket Websocket简介 定义和工作原理 Websocket是一种在单个TCP连接上进行全双工通信的协议。与传统的HTTP请求 - 响应模式不同&#xff0c;它允许服务器主动向客户端推送数据。例…

Vue 3与TypeScript集成指南:构建类型安全的前端应用

在Vue 3中使用TypeScript&#xff0c;可以让你的组件更加健壮和易于维护。以下是使用TypeScript与Vue 3结合的详细步骤和知识点&#xff1a; 1. 环境搭建 首先&#xff0c;确保你安装了Node.js&#xff08;推荐使用最新的LTS版本&#xff09;和npm或Yarn。然后&#xff0c;安…

React-useRef与DOM操作

#题引&#xff1a;我认为跟着官方文档学习不会走歪路 ref使用 组件重新渲染时&#xff0c;react组件函数里的代码会重新执行&#xff0c;返回新的JSX&#xff0c;当你希望组件“记住”某些信息&#xff0c;但又不想让这些信息触发新的渲染时&#xff0c;你可以使用ref&#x…

# Spring事务

Spring事务 什么是spring的事务&#xff1f; 在Spring框架中&#xff0c;事务管理是一种控制数据库操作执行边界的技术&#xff0c;确保一系列操作要么全部成功&#xff0c;要么全部失败&#xff0c;从而维护数据的一致性和完整性。Spring的事务管理主要关注以下几点&#xf…

Jenkins更换主题颜色+登录页面LOGO图片

默认主题和logo图片展示 默认主题黑色和白色。 默认LOGO图片 安装插件 Login ThemeMaterial Theme 系统管理–>插件管理–>Available plugins 搜不到Login Theme是因为我提前装好了 没有外网的可以参考这篇离线安装插件 验证插件并修改主题颜色 系统管理–>A…

LLM文档对话 —— pdf解析关键问题

一、为什么需要进行pdf解析&#xff1f; 最近在探索ChatPDF和ChatDoc等方案的思路&#xff0c;也就是用LLM实现文档助手。在此记录一些难题和解决方案&#xff0c;首先讲解主要思想&#xff0c;其次以问题回答的形式展开。 二、为什么需要对pdf进行解析&#xff1f; 当利用L…

【虚幻引擎】UE5数字人开发实战教程

本套课程将会交大家如何去开发属于自己的数字人&#xff0c;包含大模型接入&#xff0c;流式输出&#xff0c;语音识别&#xff0c;语音合成&#xff0c;口型驱动&#xff0c;动画蓝图&#xff0c;语音唤醒等功能。 课程介绍视频如下&#xff1a; 【虚幻引擎】UE5 历时一个多月…

上位机编程命名规范

1.大小写规范 文件名全部小写是一种广泛使用的命名约定&#xff0c;特别是在跨平台开发和开源项目中。主要原因涉及技术约束、可读性和一致性等方面。以下是原因和优劣势的详细分析&#xff1a; 1. 避免跨平台问题 不同操作系统对文件名的大小写处理方式不同&#xff1a; Li…

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

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

form表单的使用

模板 <template><el-form :model"formData" ref"form1Ref" :rules"rules"><el-form-item label"手机号" prop"tel"><el-input v-model"formData.tel" /></el-form-item><el-f…

【priority_queue的使用及模拟实现】—— 我与C++的不解之缘(十六)

前言 ​ priority_queue&#xff0c;翻译过来就是优先级队列&#xff0c;但是它其实是我们的堆结构&#xff08;如果堆一些遗忘的可以看一下前面的文章复习一下【数据结构】二叉树——顺序结构——堆及其实现_二叉树顺序结构-CSDN博客&#xff09;&#xff0c;本篇文章就来使用…

php 与 thinkphp 13 张 表 关联 查询,a.pry_key=b.pry_key and c.pry_key= b.pry_key 代码示例

在 PHP 中&#xff0c;假设你有 13 张表并且这些表之间通过 pry_key 关联&#xff0c;你可以使用 SQL 的 JOIN 来将这些表连接在一起&#xff0c;然后通过 PHP 执行该查询。以下是一个简化的示例&#xff0c;展示如何通过 JOIN 语句将 13 张表联接&#xff0c;并使用 PHP 代码执…