Vue项目实战:基于用户身份的动态路由管理

🌟 前言

欢迎来到我的技术小宇宙!🌌 这里不仅是我记录技术点滴的后花园,也是我分享学习心得和项目经验的乐园。📚 无论你是技术小白还是资深大牛,这里总有一些内容能触动你的好奇心。🔍

  • 🤖 洛可可白:个人主页

  • 🔥 个人专栏:✅前端技术 ✅后端技术

  • 🏠 个人博客:洛可可白博客

  • 🐱 代码获取:bestwishes0203

  • 📷 封面壁纸:洛可可白wallpaper

在这里插入图片描述

文章目录

  • Vue项目实战:基于用户身份的动态路由管理
    • 动态路由的基本概念
    • 实现基于用户身份的动态路由
      • 1. 配置基础路由
      • 2. 用户身份验证模块
      • 3. 导航守卫
      • 4. 登录组件逻辑
    • 结语
    • 🎉 往期精彩回顾

Vue项目实战:基于用户身份的动态路由管理

在前后端分离项目中,根据不同用户的身份展示不同的路由和页面是一项常见的需求。Vue.js结合vue-router提供了强大的路由管理能力,允许我们根据后端接口的返回数据动态地添加和控制路由。本文将介绍如何在Vue项目中实现基于用户身份的动态路由管理,以及如何利用Vue的module模块来加载这些路由。

动态路由的基本概念

动态路由不仅指路径参数会变化的路由,还可以根据应用程序的运行时状态来动态添加或修改。在Vue中,这通常是通过vue-router的addRoute方法来实现的。

实现基于用户身份的动态路由

1. 配置基础路由

首先,在router.jsrouter/index.js文件中配置基础路由,这些路由是所有用户都能访问的。

import { createRouter, createWebHistory } from 'vue-router'
import Home from '../components/Home.vue'
import Login from '../components/Login.vue'
import Dashboard from '../components/Dashboard.vue'

const routes = [
  {
    path: '/',
    component: Home
  },
  {
    path: '/login',
    component: Login
  },
  {
    path: '/dashboard',
    component: Dashboard,
    meta: { requiresAuth: true } // 标记需要身份验证的路由
  }
]

const router = createRouter({
  history: createWebHistory(),
  routes
})

2. 用户身份验证模块

在Vue的module模块中处理用户身份验证逻辑。这通常涉及到与后端接口的交互,获取用户的登录状态和可访问的路由信息。

// store/auth.js
import { defineStore } from 'pinia'
const modules = import.meta.glob("../views/**/**.vue");

export const useAuthStore = defineStore('auth', {
  state: () => ({
    isAuthenticated: false,
    routes: []
  }),
  actions: {
    async login({ userId, routes }) {
      this.isAuthenticated = true;
      this.routes = routes;
      // 动态添加路由
      this.addRoutes(routes);
    },
    logout() {
      this.isAuthenticated = false;
      this.routes = [];
      // 清除动态添加的路由
      this.removeRoutes();
    }
  },
  methods: {
    addRoutes(newRoutes) {
      newRoutes.forEach(route => {
        router.addRoute(this.createRoute(route));
      });
    },
    removeRoutes() {
      this.routes.forEach(route => {
        const routeRecord = router.getRoute(route.name);
        if (routeRecord) {
          router.removeRoute(routeRecord);
        }
      });
    },
    createRoute(config) {
      return {
        path: config.path,
        component: modules[`../components/${config.component}.vue`],
        meta: { requiresAuth: true }
      };
    }
  }
})

3. 导航守卫

使用vue-router的导航守卫来检查用户是否有权限访问某个路由。

router.beforeEach((to, from, next) => {
  if (to.matched.some(record => record.meta.requiresAuth)) {
    if (useAuthStore().isAuthenticated) {
      next();
    } else {
      next('/login');
    }
  } else {
    next();
  }
})

4. 登录组件逻辑

在登录组件中调用身份验证模块的login方法,传入用户信息和可访问的路由。

// components/Login.vue
<template>
  <!-- 登录表单 -->
</template>

<script>
import { useAuthStore } from '../store/auth'

export default {
  methods: {
    async onLogin() {
      // 假设这是从后端接口获取的用户信息和路由
      const userInfo = { userId: '123', routes: [{ path: '/dashboard', component: 'Dashboard' }]}
      const authStore = useAuthStore();
      await authStore.login(userInfo.userId, userInfo.routes);
    }
  }
}
</script>

结语

通过上述步骤,我们可以实现一个基于用户身份的动态路由管理系统。这种系统可以根据用户的登录状态和权限动态地添加和移除路由,确保用户只能访问他们被授权的页面。使用Vue的module模块和vue-router的addRoute方法,我们可以灵活地管理应用程序的路由结构,同时保持代码的清晰和可维护性。这种方法在构建企业级应用时尤其有用,因为它可以帮助我们实现复杂的权限控制和路由管理。

如果对你有帮助,点赞👍、收藏💖、关注🔔是我更新的动力!👋🌟🚀

🎉 往期精彩回顾

Windows Edge 兼容性问题修复:提升用户体验的关键步骤
Vue2和Vue3组件通信:父子与兄弟间的桥梁
无缝集成:使用Spring Boot和Vue实现头像上传与回显功能
前端开发全景指南:语言与框架的精粹
C语言开发实战:使用EasyX在Visual Studio 2022中创建井字棋游戏
前端与后端协同:实现Excel导入导出功能
Java日期格式化:掌握时间的艺术
正则表达式完全指南:语法、用法及JavaScript实例
正则表达式与JSON序列化:去除JavaScript对象中的下划线键名
探索async/await的魔力:简化JavaScript异步编程
JavaScript日期格式化:从原始值到用户友好的字符串
入门教程:Windows搭建C语言和EasyX开发环境
CentOS系统下Docker的安装教程
Spring Boot单元测试全指南:使用Mockito和AssertJ
Yarn简介及Windows安装与使用指南
H5实现3D旋转照片墙教程
Element-Plus 实现动态渲染图标教程
MyBatis-Plus分页接口实现教程:Spring Boot中如何编写分页查询

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

201403-3 命令行选项

100分 #include <bits/stdc.h> using namespace std;int main() {string line;cin >> line;map<char, bool> dct; // true:带参数 false:不带参数for (int i 0; i < line.size(); i){if (line[i] ! :){dct.insert(pair<char, bool>(line[i], fals…

ubuntu 23.10.1 mysql 安装

注&#xff1a;请进入root用户模式下操作&#xff0c;若没有&#xff0c;输入命令前加上sudo 1、更新软件包列表 apt update2、安装最新版的Mysql服务器 apt install mysql-server -y如果不加-y 会在安装过程中&#xff0c;系统将提示你设置MySQL的root密码。确保密码足够强…

职场成长之路:如何规划与实现

在职场中&#xff0c;每个人都希望实现自己的职业目标和成长。然而&#xff0c;职场成长并非一蹴而就&#xff0c;需要有明确的规划和方法。本文将探讨如何在职场中规划与实现成长&#xff0c;帮助您迈向成功之路。 一、明确职业目标 1. 自我认知&#xff1a;了解自己的兴趣、…

C语言双向链表

1. 链表的分类 链表的种类很多&#xff0c;主要由三个要素决定&#xff1a;是否带头&#xff0c;单向还是双向&#xff0c;是否循环。 根据这三个要素的组合&#xff0c;共可得到8&#xff08;2*2*2&#xff09;种链表 而我们常用的链表有两种&#xff1a; 1. 单链表&#xf…

鸿蒙原生应用元服务-访问控制(权限)开发Stage模型向用户申请授权

一、向用户申请授权 当应用需要访问用户的隐私信息或使用系统能力时&#xff0c;例如获取位置信息、访问日历、使用相机拍摄照片或录制视频等&#xff0c;应该向用户请求授权。这需要使用 user_grant 类型权限。在此之前&#xff0c;应用需要进行权限校验&#xff0c;以判断当前…

02_按键控制LED

按键控制LED 按键控制LED 按键控制LED while (1){//按键控制LEDif(HAL_GPIO_ReadPin(GPIOC,GPIO_PIN_5)GPIO_PIN_RESET)//读取PC5引脚状态&#xff0c;即检测按键是否按下{while(HAL_GPIO_ReadPin(GPIOC,GPIO_PIN_5)GPIO_PIN_RESET);//松手检测HAL_GPIO_WritePin(GPIOA,GPIO_PI…

【JavaWeb】Day45.Mybatis——入门程序

什么是MyBatis? MyBatis是一款优秀的持久层框架&#xff0c;用于简化JDBC的开发。 &#xff08;持久层&#xff1a;指的是就是数据访问层(dao)&#xff0c;是用来操作数据库的。&#xff09; &#xff08;框架&#xff1a;是一个半成品软件&#xff0c;是一套可重用的、通用…

【软考】UML中的图之类图

目录 1. 说明2. 图示3. 类图使用方式3.1 对系统的词汇建模3.2 对简单的协作建模3.3 对逻辑数据库模式建模 1. 说明 1.类图&#xff08;Class Diagram&#xff09;展现了一组对象、接口、协作和它们之间的关系。2.在面向对象系统的建模中所建立的最常见的图是类图。3.类图给出系…

Openwrt21.02支持SKW78(MT7621)

1.获取SDK 1.下载Openwrt源码 下载链接&#xff1a; git clone --branch openwrt-21.02 https://gitee.com/cocos_yang/openwrt.git 下载完后&#xff0c;会有一个openwrt目录&#xff0c;进入openwrt目录 cd openwrt 修改feeds.conf.default的内容&#xff0c;如下所示&#x…

操作系统(1)计算机存储结构

文章目录 一、计算机存储结构1、基本概念2、计算机存储结构的组成部分3、局部性原理4、高速缓存4.1、基本概念4.2、工作原理4.3、层次结构4.4、对系统性能的影响4.5、一致性问题 5、寄存器5.1&#xff0c;种类5.2&#xff0c;特点5.3、作用5.4、寄存器与缓存的差异 前言 计算机…

MybatisPlus实现数据权限隔离

引言 Mybatis Plus对Mybatis做了无侵入的增强&#xff0c;非常的好用&#xff0c;今天就给大家介绍它的其中一个实用功能&#xff1a;数据权限插件。 数据权限插件的应用场景和多租户的动态拦截拼接SQL一样。建议点赞收藏关注&#xff0c;方便以后复习查阅。 依赖 首先导入M…

【网安小白成长之路】7.burp基本使用

&#x1f42e;博主syst1m 带你 acquire knowledge&#xff01; ✨博客首页——syst1m的博客&#x1f498; &#x1f51e; 《网安小白成长之路(我要变成大佬&#x1f60e;&#xff01;&#xff01;)》真实小白学习历程&#xff0c;手把手带你一起从入门到入狱&#x1f6ad; &…

计算机网络3——数据链路层1

文章目录 一、介绍1、基础2、内容 二、数据链路层的几个共同问题1、数据链路和帧2、三个基本问题1&#xff09;封装成帧2&#xff09;透明传输3&#xff09;差错检测 三、点对点协议 PPP1、PPP协议的特点1&#xff09;PPP 协议应满足的需求2&#xff09;PPP 协议的组成 2、PPP协…

vmware安装ubuntu-18.04系统

一、软件下载 百度网盘&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1fK2kygRdSux1Sr1sOKOtJQ 提取码&#xff1a;twsb 二、安装ubuntu系统 1、把ubuntu-18.04的压缩包下载下来&#xff0c;并且解压 2、打开vmware软件&#xff0c;点击文件-打开 3、选择我们刚刚解…

限制登录Linux服务器的几种方式

一.第一种方法 通过修改TCP Wrappers服务访问控制来实现限制登录Linux 1.这里以sshd服务为例&#xff0c;配置完成后&#xff0c;只允许配置允许的IP才能ssh连接本机服务器&#xff0c;其他IP拒绝判断某一个基于tcp协议的服务是否支持tcp_wrapper&#xff0c;要先判断它是否支…

【C语言】<动态内存管理>我的C语言终末章

&#xff1c;动态内存管理&#xff1e; 1. 为什么要有动态内存分配2. malloc和free2.1 malloc2.2 free 3. calloc和realloc3.1 calloc3.2 realloc 4.常见的动态内存错误4.1 对NULL指针的解引用操作4.2 对动态开辟空间的越界访问4.3 对非动态开辟内存使用free释放4.4 使用free释…

Linux下SPI设备驱动实验:实现SPI发送/接收数据的函数

一. 简介 前面文章介绍了SPI设备数据收发处理流程&#xff0c;后面几篇文章实现了SPI设备驱动框架&#xff0c;加入了字符设备驱动框架代码。文章如下&#xff1a; SPI 设备驱动编写流程&#xff1a;SPI 设备数据收发处理流程中涉及的结构体与函数-CSDN博客 SPI 设备驱动编写…

PgSQL之WITH Queries/Statement

PostgreSQL WITH 子句 在 PostgreSQL 中&#xff0c;WITH 子句提供了一种编写辅助语句的方法&#xff0c;以便在更大的查询中使用。 WITH 子句有助于将复杂的大型查询分解为更简单的表单&#xff0c;便于阅读。这些语句通常称为通用表表达式&#xff08;Common Table Express…

基于有序抖动块截断编码的水印嵌入和提取算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 噪声测试 旋转测试 压缩测试 2.算法运行软件版本 matlab2022a 3.部分核心程序 ............................................................…

Spring(24) Json序列化的三种方式(Jackson、FastJSON、Gson)史上最全!

目录 一、Jackson 方案&#xff08;SpringBoot默认支持&#xff09;1.1 Jackson 库的特点1.2 Jackson 的核心模块1.3 Maven依赖1.4 代码示例1.5 LocalDateTime 格式化1.6 统一配置1.7 常用注解1.8 自定义序列化和反序列化1.9 Jackson 工具类 二、FastJSON 方案2.1 FastJSON 的特…