前端项目的动态路由实现(vue)

 一、引言

动态路由,很多场景是,有些页面必须是某些用户或者某些角色才能访问,所以呢,前端的代码即使不给页面的入口,但是要是直接在地址栏敲入相关地址页面还是可以被访问到。为了杜绝这种情况,就用到了动态路由,没有权限的页面直接在路由里不注册,及时输入地址也将无效。路由信息这东西有点大,放到以上说的本地存储方式里,貌似都不合适

这个动态的配置呢主要是通过vue-router的addRoutes方法。但add的内容呢,是前端去动态配置呢,还是根据后台的接口返回呢。主要看具体使用情况,不过还是后台控制稳妥一些。这种动态的情况,实现权限控制。

一、router的beforeEach

import { get, isEmpty, replace } from 'lodash'const getCurrentUri = base => { // 获取当前地址let protocol = get(location, 'protocol')let host = get(location, 'host')let href = get(location, 'href')return replace(href, `${protocol}//${host}${base}`, '/')
}export const initRouterGuard = (router, store) => {const { dispatch, getters } = storerouter.beforeEach((to, from, next) => {console.log('\n====== In router.beforeEach ======')let {isLoggedin,menuList,activeMenu} = get(getters, 'user')// router匹配的是除设定base之外的路由,获取当前let uri = getCurrentUri(get(router, 'options.base'))console.log(`At path: ${uri}, From ${from.path} to ${to.path}`)// home为登录页,isLoggedin是一个持久化的数据,如果没有登录,访问非登录页,则跳转至登录页if (!isLoggedin && to.path !== '/home') {next('/home')// 如果登录了,但没有拿到动态路由信息,则取获取路由信息,该操作为刷新} else if (isEmpty(menuList) && isLoggedin) {console.log('Before dispatch "setMenu"')dispatch('setMenu').then(() => { // setMenu一个请求let matched = router.matcher.match(uri) // 拿到权限路由后,看当前路由是否在其中if (activeMenu && matched.name && matched.name !== 'Home') {console.log(`Current uri ${uri} get matched route`)next({ replace: true, path: uri }) // 如果有就跳转} else {matched = router.matcher.match('/dashboard')next({ replace: true, path: '/dashboard' }) // 如果没有就回到主页}matched.meta.showMenu && dispatch('switchActiveMenu', matched.name)})} else {console.log('Before default next()')to.meta.showMenu && dispatch('switchActiveMenu', to.name)next()}})
}

二、如果没有统一主页

import { get, replace, isEmpty } from 'lodash'const locationPrefix = process.env.ROUTE_BASEconst getCurrentUri = () => {let protocol = get(location, 'protocol')let host = get(location, 'host')let href = get(location, 'href')console.log('getCurrentUri', href, `${protocol}//${host}${locationPrefix}`)return replace(href, `${protocol}//${host}${locationPrefix}`, '')
}export const initRouterGuard = (router, store) => {const { dispatch, getters } = storerouter.beforeEach((to, from, next) => {console.log('to', to.path, 'from', from.path)// 首先从vuex store中获取当前用户的登录状态、菜单列表、当前激活的菜单const { isLoggedin, menuList } = get(getters, 'user')// 特殊处理,手机浏览器内核会导致isLoggedin为null而且cookie也拿不到let pendingUri = getCurrentUri()const matchedRoute = router.matcher.match(to.path)// const needRedirect = includes(pendingUri, '/detail') && !get(matchedRoute, name)console.log('matchedRoute', get(matchedRoute, name), pendingUri)// 如果用户没登录,而且即将去的页面不是登录页面,则直接重定向到登录页面if (!isLoggedin && to.name !== 'Login' && !(to.name === 'resetPwd' && to.params.type === '0')) {return next({ replace: true, name: 'Login' })}// 如果用户登录了, 但是菜单数据是空的,说明是刷新页面,需要去一下index做跳转if (isLoggedin && isEmpty(menuList) && !['Index'].includes(matchedRoute.name)) {if ((pendingUri === '/login') || (pendingUri === '/index')) {pendingUri = '/user/list'}dispatch('setPendingUri', pendingUri) // 将要去的页面存储起来return next({ replace: true, path: '/index' })}dispatch('switchActiveMenu', to.name)next()})
}

三、虚拟公共主页

<template><div>主页</div>
</template><script>
import { mapGetters, mapActions } from 'vuex'export default {name: 'Index',computed: {...mapGetters(['user','common'])},mounted () {this.loadEntries()},methods: {...mapActions(['setMenu']),async loadEntries () {try {if (this._isEmpty(this.user.menuList)) {await this.setMenu()// Redirect to pending uriconst matched = this.common.pendingUri ? this.$router.match(this.common.pendingUri) : nullconst matchedName = this._get(matched, 'name')console.log('loadEntries', this.common.pendingUri, this.$route.name, matchedName)if (this.$route.name !== matchedName && matchedName && matchedName !== 'Login') {this.$router.push(matched)}}} catch (error) {// this.$toast(error.message)}}}
}
</script>

这样就实现了一个动态路由的流转及路由的权限控制~

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

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

相关文章

python学opencv|读取图像

【1】引言 前序学习了使用matplotlib模块进行画图&#xff0c;今天开始我们逐步尝试探索使用opencv来处理图片。 【2】学习资源 官网的学习链接如下&#xff1a; OpenCV: Getting Started with Images 不过读起来是英文版&#xff0c;可能略有难度&#xff0c;所以另推荐一…

数据结构 ——— 归并排序算法的实现

目录 归并排序的思想 归并排序算法的实现 归并排序的思想 将已经有序的子序列合并&#xff0c;得到完全有序的序列&#xff0c;即先使每个子序列有序后&#xff0c;再使子序列段间有序 若将两个有序表合并成一个有序表&#xff0c;称为二路归并 归并排序步骤示意图&#x…

Springboot项目搭建(6)-前端登录跳转与Pinia实用

1.添加响应错误拦截 文件地址&#xff1a;src\utils\request.js import axios from axios import { ElMessage } from element-plus const baseURL /api const instance axios.create({baseURL}) //添加拦截器 instance.interceptors.response.use(result>{&#x1f447…

多输入多输出 | Matlab实现TCN-LSTM时间卷积神经网络结合长短期记忆神经网络多输入多输出预测

多输入多输出 | Matlab实现TCN-LSTM时间卷积神经网络结合长短期记忆神经网络多输入多输出预测 目录 多输入多输出 | Matlab实现TCN-LSTM时间卷积神经网络结合长短期记忆神经网络多输入多输出预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 多输入多输出 | Matlab实现…

C++网络编程:select IO多路复用及TCP服务器开发

C网络编程&#xff1a;使用select实现IO多路复用 一、什么是 IO 多路复用&#xff1f;二、IO多路复用器 select三、相关接口3.1、fd_set 结构体3.2、宏和函数 四、select 实现 TCP 服务器五、总结 一、什么是 IO 多路复用&#xff1f; 在网络编程中&#xff0c;最容易想到的并…

HDU Go Running(最小点覆盖 + 网络流优化)

题目大意&#xff1a;有一条无限长跑道&#xff0c;每个人可以规定自己跑步的方向&#xff0c;起点&#xff0c;跑步起止时间。每个人跑步的速度都是1m/s。最后从监控人员哪里得到了n个报告&#xff0c;每个报告给出了某人在某一时候所在的位置&#xff0c;问跑步的最少可能人数…

28.UE5实现对话系统

目录 1.对话结构的设计&#xff08;重点&#xff09; 2.NPC对话接口的实现 2.1创建类型为pawn的蓝图 2.2创建对话接口 3.对话组件的创建 4.对话的UI设计 4.1UI_对话内容 4.2UI_对话选项 4.3UI_对话选项框 5.对话组件的逻辑实现 通过组件蓝图&#xff0c;也就是下图中的…

Reachy 2,专为AI与机器人实验室打造的卓越开源双臂移动操作平台!

近期&#xff0c;花粉机器人&#xff08;POLLEN ROBOTICS&#xff09;隆重推出Reachy 2仿生机器人——下一代开源操作平台&#xff0c;为AI与机器人实验室带来理想的双臂移动操作科研平台&#xff01; Reachy 2的仿生性&#xff1a; 》拥有两个基于Maxon无刷电机的仿生7自由度…

python的openpyxl库设置表格样式:字体/边框/对齐/颜色等

学习目录 1. 安装和使用openpyxl库设置表格样式 2 设置字体font 3 设置边框 4 设置对齐方式 5 设置单元格数据格式 6 设置行高和列宽 7 填充单元格颜色 附录-关于颜色说明 本章节主要介绍如何使用openpyxl库设置表格中的一些样式&#xff0c;比如字体&#xff0c;边框…

Git旧文件覆盖引发思考

一天&#xff0c;我的同事过来找到我&#xff0c;和我讲&#xff1a;张叫兽&#xff0c;大事不好&#xff0c;我的文件被人覆盖了。git是真的不好用啊 git不好用&#xff1f;文件被覆盖&#xff1b;瞬间我似乎知道了什么&#xff0c;让我想到了某位男明星的语法&#xff1a;他…

QSqlTableModel的使用

实例功能 这边使用一个实例显示数据库 demodb 中 employee 数据表的内容&#xff0c;实现编辑、插入、删除的操作&#xff0c;实现数据的排序和记录过滤&#xff0c;还实现 BLOB 类型字段 Photo 中存储照片的显示、导入等操作&#xff0c;运行界面如下图&#xff1a; 在上图中…

什么是代理,nodenginx前端代理详解

一. 什么是代理&#xff1f; 代理就是通过一个特殊的网络服务去访问另一网络服务的一种间接访问方式。像我们不能直接访问国外的网站&#xff0c;只能使用VPN&#xff0c;就是使用了代理 二. 前端为什么要用代理&#xff1f; 首先明确以下两个概念 &#xff08;1&#xff09…

java脚手架系列16-AI大模型集成

之所以想写这一系列&#xff0c;是因为之前工作过程中有几次项目是从零开始搭建的&#xff0c;而且项目涉及的内容还不少。在这过程中&#xff0c;遇到了很多棘手的非业务问题&#xff0c;在不断实践过程中慢慢积累出一些基本的实践经验&#xff0c;认为这些与业务无关的基本的…

网络安全中的数据科学如何重新定义安全实践?

组织每天处理大量数据&#xff0c;这些数据由各个团队和部门管理。这使得全面了解潜在威胁变得非常困难&#xff0c;常常导致疏忽。以前&#xff0c;公司依靠 FUD 方法&#xff08;恐惧、不确定性和怀疑&#xff09;来识别潜在攻击。然而&#xff0c;将数据科学集成到网络安全中…

【算法day1】数组:双指针算法

题目引用 这里以 1、LeetCode704.二分查找 2、LeetCode27.移除元素 3、LeetCode977.有序数组的平方 这三道题举例来说明数组中双指针的妙用。 1、二分查找 给定一个 n 个元素有序的&#xff08;升序&#xff09;整型数组 nums 和一个目标值 target &#xff0c;写一个函数搜…

open-instruct框架使用记录:只使用huggingface数据集的小部分进行训练,如何修改dataset_info.json文件

open-instruct框架 这篇笔记主要记录以下问题&#xff1a;只使用huggingface下载的数据集中的一小部分数据进行数据训练。而且我不想修改open-instruct的加载数据集的代码&#xff0c;以及脚本中的--dataset_mixer_list参数的指定等。下面是我的思路历程。 if args.dataset_na…

Jenkins升级到最新版本后无法启动

1. 场景还原 最近在web界面将jenkins升级到最新版本后&#xff0c;后台无法启动jenkins服务&#xff0c;服务状态如下&#xff1a; 运行jenkins命令提示invalid Java version jenkins --version jenkins: invalid Java version: java version "1.8.0_202" Java(TM)…

DRM(数字权限管理技术)防截屏录屏----ffmpeg安装

提示&#xff1a;ffmpeg安装 文章目录 [TOC](文章目录) 前言一、下载二、配置环境变量三、运行ffmpeg四、文档总结 前言 FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的…

Unity版本使用情况统计(更新至2024年11月)

UWA发布&#xff5c;本期UWA发布的内容是第十五期Unity版本使用统计&#xff0c;统计周期为2024年5月至2024年11月&#xff0c;数据来源于UWA网站&#xff08;www.uwa4d.com&#xff09;性能诊断提测的项目。希望给Unity开发者提供相关的行业趋势作为参考。 2024年5月 - 2024年…

Spring Aop 中对JoinPoint的理解

以下是源码中对 JoinPoint 的描述 A runtime joinpoint is an event that occurs on a static joinpoint (i.e. a location in a program). For instance, an invocation is the runtime joinpoint on a method (static joinpoint). The static part of a given joinpoint can…