uniapp 如何实现路由拦截,路由守卫
uniapp框架的全局文件:page.json全局文件,官网链接
背景:
通过封装 UniApp 的路由方法,并在封装方法中添加自定义逻辑,可以实现类似 Vue Router 的路由守卫功能。
在 UniApp 框架中,不像 Vue Router 直接支持路由守卫,但可以通过一些变通的方法来实现路由拦截和路由守卫的功能。主要的思路是通过重写或包装 UniApp 的路由跳转方法 (
uni.navigateTo,uni.redirectTo,uni.switchTab,uni.reLaunch,uni.navigateBack) 来实现。
一、uniapp路由守卫实现的思路以及步骤
以下是如何在 UniApp 中实现路由拦截和路由守卫的示例:
步骤一:封装路由方法
首先,我们需要封装 UniApp 的路由方法,以便在每次路由跳转时执行一些自定义逻辑,比如路由守卫。
// utils/router.js// 封装 navigateTo
function navigateTo(options) {if (beforeEach(options.url)) {uni.navigateTo(options);}
}// 封装 redirectTo
function redirectTo(options) {if (beforeEach(options.url)) {uni.redirectTo(options);}
}// 封装 switchTab
function switchTab(options) {if (beforeEach(options.url)) {uni.switchTab(options);}
}// 封装 reLaunch
function reLaunch(options) {if (beforeEach(options.url)) {uni.reLaunch(options);}
}// 封装 navigateBack
function navigateBack(options) {if (beforeEach()) {uni.navigateBack(options);}
}// 自定义路由守卫函数
function beforeEach(url) {// 在这里添加自定义逻辑,例如权限验证if (url.includes('/pages/protectedPage')) {// 检查是否有权限访问受保护页面const hasAccess = checkUserAccess();if (!hasAccess) {uni.showToast({title: '您没有权限访问此页面',icon: 'none'});return false;}}return true;
}// 示例:检查用户访问权限
function checkUserAccess() {// 在这里添加具体的权限验证逻辑// 例如检查用户是否已登录const user = uni.getStorageSync('user');return !!user;
}// 导出封装的方法
export default {navigateTo,redirectTo,switchTab,reLaunch,navigateBack
};
步骤二:在应用中使用封装的路由方法
在应用的各个页面或组件中,使用封装好的路由方法来替代原生的 uni 路由方法。
// 使用封装的路由方法
import router from '@/utils/router';export default {methods: {goToProtectedPage() {router.navigateTo({url: '/pages/protectedPage/protectedPage'});},goToHomePage() {router.switchTab({url: '/pages/index/index'});}}
};
步骤三:全局路由拦截(可选)
如果希望在整个应用中统一进行路由拦截,可以在 App.vue 或 main.js 中统一引入和配置。
在实际项目中,可以根据需要扩展封装的方法,例如添加更多的路由守卫逻辑、全局前置守卫、后置守卫等。这样可以提高应用的安全性和用户体验。
// main.js 或 App.vue
import router from '@/utils/router';// 将封装的路由方法挂载到全局对象
uni.$router = router;export default {onLaunch: function() {// 全局路由守卫逻辑(可选)// 可以在这里添加全局的路由拦截逻辑}
};
完整的App.vue
//App.vue
<template><view><button @click="goToProtectedPage">去受保护页面</button><button @click="goToHomePage">去首页</button></view>
</template><script>
import router from '@/utils/router';export default {onLaunch: function() {// 全局路由守卫逻辑(可选)// 可以在这里添加全局的路由拦截逻辑},methods: {goToProtectedPage() {router.navigateTo({url: '/pages/protectedPage/protectedPage'});},goToHomePage() {router.switchTab({url: '/pages/index/index'});}}
};
</script>
全局路由的拦截逻辑:
// 自定义封装一个路由拦截/路由守卫
function beforeEachFun(url) {// 1. 权限验证if (url.includes('/pages/protectedPage')) {const hasAccess = checkUserAccess();if (!hasAccess) {uni.showToast({title: '您没有权限访问此页面',icon: 'none'});return false;}}// 2. 用户登录状态检查if (url.includes('/pages/userProfile')) {const isLoggedIn = checkUserLoggedIn();if (!isLoggedIn) {uni.showToast({title: '请先登录',icon: 'none'});uni.navigateTo({url: '/pages/login/login'});return false;}}// 3. 记录页面访问日志logPageVisit(url);// 4. 页面访问频率限制if (url.includes('/pages/highFrequencyPage')) {const canAccess = checkPageAccessFrequency(url);if (!canAccess) {uni.showToast({title: '访问过于频繁,请稍后再试',icon: 'none'});return false;}}return true;
}
代码解释:
- 权限验证:
- 在
beforeEachFun函数中,检查即将访问的 URL 是否包含受保护页面的路径。如果是,则调用checkUserAccess函数来检查用户是否有访问权限。- 如果用户没有权限,显示提示信息并阻止路由跳转。
- 用户登录状态检查:
- 在
beforeEachFun函数中,检查即将访问的 URL 是否包含需要登录的页面路径。如果是,则调用checkUserLoggedIn函数来检查用户是否已登录。- 如果用户未登录,显示提示信息并跳转到登录页面。
- 记录页面访问日志:
- 在
beforeEachFun函数中,调用logPageVisit函数记录用户访问的页面和时间戳。
- 页面访问频率限制:
- 在
beforeEachFun函数中,检查即将访问的 URL 是否包含需要限制访问频率的页面路径。如果是,则调用checkPageAccessFrequency函数检查用户访问该页面的频率。- 如果用户访问过于频繁,显示提示信息并阻止路由跳转。
二、全局路由拦截相关理论
全局路由守卫可以做的一些拦截,包括如下:
- 权限验证:检查用户是否有权限访问某些页面。
- 用户登录状态检查:验证用户是否已登录,未登录时跳转到登录页面。
- 记录页面访问日志:在每次路由跳转时记录用户访问的页面信息。
- 页面访问频率限制:限制用户在一定时间内重复访问某个页面。
其它,全局守卫封装的方法beforeEachFun()中调用的代码,涉及到的代码如下:
// 示例:检查用户访问权限
function checkUserAccess() {const user = uni.getStorageSync('user');return user && user.role === 'admin';
}// 示例:检查用户登录状态
function checkUserLoggedIn() {const user = uni.getStorageSync('user');return !!user;
}// 示例:记录页面访问日志
function logPageVisit(url) {const visitLogs = uni.getStorageSync('visitLogs') || [];visitLogs.push({ url, timestamp: Date.now() });uni.setStorageSync('visitLogs', visitLogs);
}// 示例:检查页面访问频率
function checkPageAccessFrequency(url) {const visitLogs = uni.getStorageSync('visitLogs') || [];const recentVisits = visitLogs.filter(log => log.url === url && Date.now() - log.timestamp < 60000);return recentVisits.length < 3; // 限制在一分钟内访问同一页面的次数
}
三、uniapp和vue实现全局路由的对比
背景:
- UniApp 更适合需要跨平台开发的项目。
- Vue + vue-router 更适合构建复杂的 Web 单页面应用。
对比总结
配置方式:
- UniApp:在
pages.json文件中配置页面路径和属性,比较简单直接。- Vue:通过 JavaScript 对象数组配置,灵活性更高。
API 和功能:
- UniApp:提供的路由 API 如
navigateTo、redirectTo等,简单易用,适合多平台的路由操作。- Vue:
vue-router提供丰富的功能,如嵌套路由、路由守卫等,适合复杂的单页面应用。平台支持:
- UniApp:跨平台支持是其主要特点,能够编译到多个平台。
- Vue:主要用于 Web 应用,通过
vue-router实现 SPA 路由。视图和组件集成:
- UniApp:通过路由 API 操作页面跳转,视图管理相对简单。
- Vue:
vue-router能无缝集成 Vue 组件,通过<router-view>实现组件视图的切换。
(一)、uniapp
UniApp 是一个使用 Vue 语法的跨平台框架,可以编译到多种平台(如微信小程序、H5、Android、iOS 等)。其路由系统针对多平台进行了优化,主要区别在于 API 和部分实现细节。
特点:
- 跨平台支持:UniApp 的路由系统设计成适配多平台,包括小程序、H5 和移动应用等。
- 路由配置:在
pages.json文件中统一配置页面路径和页面属性。- API 简单:UniApp 提供了简单易用的路由 API,如
uni.navigateTo、uni.redirectTo、uni.switchTab等。
示例:
1.在 pages.json 中配置路由:
{"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"}},{"path": "pages/about/about","style": {"navigationBarTitleText": "关于我们"}}],"tabBar": {"list": [{"pagePath": "pages/index/index","text": "首页"},{"pagePath": "pages/about/about","text": "关于"}]}
}
2.使用 API 跳转页面:
// 跳转到关于页面
uni.navigateTo({url: '/pages/about/about'
});// 重定向到首页
uni.redirectTo({url: '/pages/index/index'
});// 切换到 tab 页
uni.switchTab({url: '/pages/index/index'
});
(二)、vue+vue-router
Vue 的路由系统由 vue-router 实现,是专门为 Vue.js 设计的前端路由库,适用于单页面应用(SPA)。
特点:
- 丰富的功能:
vue-router提供了嵌套路由、命名路由、动态路由、路由守卫等丰富的功能。- 灵活配置:通过 JavaScript 对象数组配置路由,非常灵活。
- 视图和组件:
vue-router能够将路由和 Vue 组件无缝集成。
示例:
1.安装 vue-router:npm install vue-router
2.配置路由:
import Vue from 'vue';
import Router from 'vue-router';
import Home from '@/components/Home.vue';
import About from '@/components/About.vue';Vue.use(Router);const routes = [{path: '/',name: 'Home',component: Home},{path: '/about',name: 'About',component: About}
];const router = new Router({mode: 'history', // 'hash' or 'history' moderoutes
});export default router;
3.使用路由:
<template><div><router-link to="/">Home</router-link><router-link to="/about">About</router-link><router-view></router-view></div>
</template><script>
export default {name: 'App'
};
</script>
相关文章:
uniapp 如何实现路由拦截,路由守卫
uniapp框架的全局文件:page.json全局文件,官网链接 背景: 通过封装 UniApp 的路由方法,并在封装方法中添加自定义逻辑,可以实现类似 Vue Router 的路由守卫功能。 在 UniApp 框架中,不像 Vue Router 直接支…...
人工智能算法工程师(中级)课程13-神经网络的优化与设计之梯度问题及优化与代码详解
大家好,我是微学AI,今天给大家介绍一下人工智能算法工程师(中级)课程13-神经网络的优化与设计之梯度问题及优化与代码详解。 文章目录 一、引言二、梯度问题1. 梯度爆炸梯度爆炸的概念梯度爆炸的原因梯度爆炸的解决方案 2. 梯度消失梯度消失的概念梯度…...
Qt/QML学习-ComboBox
QML学习 ComboBox例程视频讲解代码 main.qml import QtQuick 2.15 import QtQuick.Window 2.15 import QtQuick.Controls 2.15Window {width: 640height: 480visible: truetitle: qsTr("ComboBox")ComboBox {id: comboBox// 列表项数据模型model: ListModel {List…...
微服务实战系列之玩转Docker(一)
前言 话说计算机的“小型化”发展,历经了大型机、中型机直至微型机,贯穿了整个20世纪的下半叶。同样,伴随着计算机的各个发展阶段,如何做到“资源共享、资源节约”,也一直是一代又一代计算机人的不懈追求和历史使命。今…...
Java中常见的语法糖
文章目录 概览泛型增强for循环自动装箱与拆箱字符串拼接枚举类型可变参数内部类try-with-resourcesLambda表达式 概览 语法糖是指编程语言中的一种语法结构,它们并不提供新的功能,而是为了让代码更易读、更易写而设计的。语法糖使得某些常见的编程模式或…...
数据库使用SSL加密连接
简介 数据库开通SSL加密连接是确保数据传输过程中安全性的关键措施,它通过加密数据、验证服务器身份、保护敏感信息、维护数据完整性和可靠性,同时满足行业标准和法规要求,进而提升用户体验和信任度,为企业的数据安全和业务连续性…...
华为OD算法题汇总
60、计算网络信号 题目 网络信号经过传递会逐层衰减,且遇到阻隔物无法直接穿透,在此情况下需要计算某个位置的网络信号值。注意:网络信号可以绕过阻隔物 array[m][n],二维数组代表网格地图 array[i][j]0,代表i行j列是空旷位置 a…...
服务器的rabbitmq的guest账号登不进去
要配置 RabbitMQ 允许 guest 账号从非 localhost 地址登录,需要执行以下步骤: 编辑 RabbitMQ 配置文件: 打开 RabbitMQ 的配置文件,通常位于 /etc/rabbitmq/rabbitmq.conf 或者 /etc/rabbitmq/rabbitmq-env.conf。如果这些文件不存…...
决策树(ID3,C4.5,C5.0,CART算法)以及条件推理决策树R语言实现
### 10.2.1 ID3算法基本原理 ### mtcars2 <- within(mtcars[,c(cyl,vs,am,gear)], {am <- factor(am, labels c("automatic", "manual"))vs <- factor(vs, labels c("V", "S"))cyl <- ordered(cyl)gear <- ordered…...
文心一言《使用手册》,文心一言怎么用?
一、认识文心一言 (一)什么是文心一言 文心一言是百度研发的 人工智能大语言模型产品,能够通过上一句话,预测生成下一段话。 任何人都可以通过输入【指令】和文心一言进行对话互动、提出问题或要求,让文心一言高效地…...
Spring Boot集成qwen:0.5b实现对话功能
1.什么是qwen:0.5b? 模型介绍: Qwen1.5是阿里云推出的一系列大型语言模型。 Qwen是阿里云推出的一系列基于Transformer的大型语言模型,在大量数据(包括网页文本、书籍、代码等)进行了预训练。 硬件要求:…...
GreenDao实现原理
GreenDao 是一款针对 Android 平台优化的轻量级对象关系映射 (ORM) 框架,它将 Java 对象映射到 SQLite 数据库,以简化数据持久化操作。GreenDao 的主要优点包括高性能、低内存占用、易于使用以及对数据库加密的支持。 以下是基于源码的 GreenDao 实现原…...
Perl语言之数组
Perl数组可以存储多个标量,并且标量数据类型可以不同。 数组变量以开头。访问与定义格式如下: #! /usr/bin/perl arr("asdfasd",2,23.56,a); print "输出所有:arr\n"; print "arr[0]$arr[0]\n"; #输出指定下标 print…...
写材料word和PPT
一、WORD 1、写内容 2、参考GPT改:内容、逻辑结构、语句 3、查标题及其标号 4、修改格式:仿宋 、正文统一为小三,标题三号,1.5倍行距,加页码。 采用VBA代码自动修改,不知为何标题无法修改字体 Sub 插入页…...
Centos---命令详解 vi 系统服务 网络
目录 一、CentOS vi命令详解 二、CentOS系统服务命令 三、CentOS权限管理命令: 四、CentOS网络管理命令介绍: 一、CentOS vi命令详解 Vi是一款强大的文本编辑器,在CentOS中广泛使用。以下是Vi编辑器的一些常用命令: 1. 打开…...
【.NET全栈】ASP.NET开发web应用——ASP.NET中的样式、主题和母版页
文章目录 前言一、在ASP.NET中应用CSS样式1、创建CSS样式(1)内联样式(2)内部样式表(3)外部样式表 2、应用CSS样式(1)菜鸟教程-简单例子(2)菜鸟教程-用户界面&…...
[ruby on rails]部署时候产生ActiveRecord::PreparedStatementCacheExpired错误的原因及解决方法
一、问题: 有时在 Postgres 上部署 Rails 应用程序时,可能会看到 ActiveRecord::PreparedStatementCacheExpired 错误。仅当在部署中运行迁移时才会发生这种情况。发生这种情况是因为 Rails 利用 Postgres 的缓存准备语句(PreparedStatementCache)功能来…...
函数传值面试题
let a {name: aa };function fun1(a) {a []; // 这里创建了一个新的局部变量a,它是一个空数组// a.name "芜湖" }fun1(a); // 调用fun1,传入a的引用副本 console.log(a); // 输出:{ name: aa }在 JavaScript 中,当你…...
redis笔记2
redis是用c语言写的,放不频繁更新的数据(用户数据。课程数据) Redis 中,"穿透"通常指的是缓存穿透(Cache Penetration)问题,这是指一种恶意或非法请求直接绕过缓存层,直接访问数据库或…...
Kafka(四) Consumer消费者
一,基础知识 1,消费者与消费组 每个消费者都有对应的消费组,不同消费组之间互不影响。 Partition的消息只能被一个消费组中的一个消费者所消费, 但Partition也可能被再平衡分配给新的消费者。 一个Topic的不同Partition会根据分配…...
Python爬虫实战:研究MechanicalSoup库相关技术
一、MechanicalSoup 库概述 1.1 库简介 MechanicalSoup 是一个 Python 库,专为自动化交互网站而设计。它结合了 requests 的 HTTP 请求能力和 BeautifulSoup 的 HTML 解析能力,提供了直观的 API,让我们可以像人类用户一样浏览网页、填写表单和提交请求。 1.2 主要功能特点…...
线程与协程
1. 线程与协程 1.1. “函数调用级别”的切换、上下文切换 1. 函数调用级别的切换 “函数调用级别的切换”是指:像函数调用/返回一样轻量地完成任务切换。 举例说明: 当你在程序中写一个函数调用: funcA() 然后 funcA 执行完后返回&…...
Psychopy音频的使用
Psychopy音频的使用 本文主要解决以下问题: 指定音频引擎与设备;播放音频文件 本文所使用的环境: Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...
React---day11
14.4 react-redux第三方库 提供connect、thunk之类的函数 以获取一个banner数据为例子 store: 我们在使用异步的时候理应是要使用中间件的,但是configureStore 已经自动集成了 redux-thunk,注意action里面要返回函数 import { configureS…...
JVM虚拟机:内存结构、垃圾回收、性能优化
1、JVM虚拟机的简介 Java 虚拟机(Java Virtual Machine 简称:JVM)是运行所有 Java 程序的抽象计算机,是 Java 语言的运行环境,实现了 Java 程序的跨平台特性。JVM 屏蔽了与具体操作系统平台相关的信息,使得 Java 程序只需生成在 JVM 上运行的目标代码(字节码),就可以…...
算法:模拟
1.替换所有的问号 1576. 替换所有的问号 - 力扣(LeetCode) 遍历字符串:通过外层循环逐一检查每个字符。遇到 ? 时处理: 内层循环遍历小写字母(a 到 z)。对每个字母检查是否满足: 与…...
Web中间件--tomcat学习
Web中间件–tomcat Java虚拟机详解 什么是JAVA虚拟机 Java虚拟机是一个抽象的计算机,它可以执行Java字节码。Java虚拟机是Java平台的一部分,Java平台由Java语言、Java API和Java虚拟机组成。Java虚拟机的主要作用是将Java字节码转换为机器代码&#x…...
解读《网络安全法》最新修订,把握网络安全新趋势
《网络安全法》自2017年施行以来,在维护网络空间安全方面发挥了重要作用。但随着网络环境的日益复杂,网络攻击、数据泄露等事件频发,现行法律已难以完全适应新的风险挑战。 2025年3月28日,国家网信办会同相关部门起草了《网络安全…...
Web后端基础(基础知识)
BS架构:Browser/Server,浏览器/服务器架构模式。客户端只需要浏览器,应用程序的逻辑和数据都存储在服务端。 优点:维护方便缺点:体验一般 CS架构:Client/Server,客户端/服务器架构模式。需要单独…...
VSCode 没有添加Windows右键菜单
关键字:VSCode;Windows右键菜单;注册表。 文章目录 前言一、工程环境二、配置流程1.右键文件打开2.右键文件夹打开3.右键空白处打开文件夹 三、测试总结 前言 安装 VSCode 时没有注意,实际使用的时候发现 VSCode 在 Windows 菜单栏…...
