在 uni-app 中进行路由跳转前的权限验证(检查用户是否登录)

使用场景:

  • 适用于需要登录才能访问的 uni-app 应用
  • 保护需要认证的页面不被未授权用户访问
  • 统一处理路由跳转的权限控制

@/utils/cookies.js下的部分代码内容:

// #ifdef H5
import Cookies from 'js-cookie'
// #endif// ums
const tokenKey = 'user_center_token'export const getUmsToken = () => {// #ifdef H5return Cookies.get(tokenKey)// #endif// #ifdef APP-PLUSreturn plus.navigator.getCookie(tokenKey)// #endif
}

@/store/modules/user.js下的部分代码内容:

// src/store/user.js
export const useUserStore = defineStore('user',() => {......const setLogOut = _ => {uni.reLaunch({url: '/pages/login/index'})}......return {......setLogOut......}},{// persist: true // 配置持久化......}
)
export function useOutsideUserStore() {return useUserStore(g_store)
}
// 从 cookies 工具中导入获取 UmsToken 的方法
import { getUmsToken } from '@/utils/cookies'// 封装路由跳转拦截器对象
const routeInterceptor = {/*** 路由跳转前的拦截逻辑* @param {Object} args - 路由参数对象* @returns {boolean} - 返回 false 表示拦截跳转,true 表示允许跳转*/invoke(args) {// 从用户 store 中获取设置登出的方法const { setLogOut } = useUserStore()// 检查条件:1. 没有 UmsToken 且 2. 目标路由不是登录页if (!getUmsToken() && !args.url.includes('/pages/login/index')) {// 显示提示 toastuni.showToast({title: '请先登录',icon: 'none'  // 不使用图标})// 执行登出操作setLogOut()// 返回 false 拦截路由跳转return false}// 允许路由跳转return true},/*** 路由跳转成功回调(暂未实现具体逻辑)* @param {Object} args - 路由参数*/success(args) {// console.log('routeInterceptor-success', args)// 可在此处添加路由跳转成功后的跟踪逻辑},/*** 路由跳转失败回调(暂未实现具体逻辑)* @param {Error} err - 错误对象*/fail(err) {// console.log('routeInterceptor-fail', err)// 可在此处添加路由跳转失败的异常处理},/*** 路由跳转完成回调(无论成功失败都会触发,暂未实现具体逻辑)* @param {Object} res - 结果对象*/complete(res) {// console.log('routeInterceptor-complete', res)// 可在此处添加路由跳转完成的统一处理}
}// 为四种路由跳转方法添加拦截器
uni.addInterceptor('navigateTo', routeInterceptor)    // 添加普通跳转拦截
uni.addInterceptor('redirectTo', routeInterceptor)    // 添加重定向跳转拦截
uni.addInterceptor('reLaunch', routeInterceptor)      // 添加重新启动应用拦截
uni.addInterceptor('switchTab', routeInterceptor)     // 添加切换 Tab 页拦截

main.js引入 import './utils/route.js'

注意事项:

  1. 确保 getUmsToken 方法能正确获取 token
  2. 登录页路径需要与实际路由配置一致
  3. 可以根据需要扩展 success/fail/complete 的逻辑
  4. 在不需要拦截的路由(如公开页面)可以不做特殊处理

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

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

相关文章

垃圾收集器ParNewCMS与底层三色标记算法详解

垃圾收集技术详解笔记 1. 分代收集理论 当前虚拟机的垃圾收集采用分代收集算法,根据对象存活周期将内存分为不同代区,以优化回收效率。 核心分区: 新生代(Young Generation):对象存活周期短,约9…

全排列(回溯算法)

本文参考代码随想录 给定一个 没有重复 数字的序列,返回其所有可能的全排列。 示例: 输入: [1,2,3] 输出: [ [1,2,3], [1,3,2], [2,1,3], [2,3,1], [3,1,2], [3,2,1] ] 思路 排列是有序的,在排列问题中不需要startIndex;但排列问题需要一个…

在线任意长度大整数计算器

具体请前往:在线大整数计算器--支持超大整数的加减乘除,幂运算/模运算,最大公约数,最小公倍数

AT6668B芯片说明书

这颗北斗专用单芯片解决方案AT6668B,采用射频前端与基带处理一体化设计,集成北斗二号/三号双模B1IB1C信号处理器。通过优化星历解码算法实现秒级卫星锁定,配合硬件加速的干扰监测模块,在电磁环境复杂的应用场景中仍可维持10Hz高频…

谷歌Chrome浏览器安装插件

因为google浏览器的应用市场(https://chrome.google.com/webstore/category/extensions)在国内无法访问,所以无法在线安装插件,这里提供开发者模式离线安装插件的方法。 1、下载crx脚本 谷歌浏览器的插件离线文件的扩展名为:crx(Firefox火狐浏览器的插件扩展名为fpi)。…

【制造】erp和mes系统建设方案(word)

第一部分 概述 第二部分 方案介绍 第三部分 系统业务流程 3.1 关键需求概括分析 3.1.1 销售管理方面 3.1.2 采购管理方面 3.1.3 仓库管理方面 3.1.4 财务管理方面 3.1.5 人力资源方面 3.2 关键需求具体分析 3.2.1 财务管理 3.2.1.1会计凭证解决 3.2.1.2钞票流…

Spring AI 系列之二十八 - Spring AI Alibaba-基于Nacos的prompt模版

之前做个几个大模型的应用,都是使用Python语言,后来有一个项目使用了Java,并使用了Spring AI框架。随着Spring AI不断地完善,最近它发布了1.0正式版,意味着它已经能很好的作为企业级生产环境的使用。对于Java开发者来说…

IMAP电子邮件归档系统Mail-Archiver

简介 什么是 Mail-Archiver ? Mail-Archiver 是一个用于从多个 IMAP 账户归档、搜索和导出电子邮件的 web 应用程序。它提供了一种全面的解决方案,帮助用户管理和存储电子邮件。 主要特点 📌自动归档:自动归档进出邮件&#xff…

李宏毅深度学习教程 第6-7章 自注意力机制 + Transformer

强烈推荐!台大李宏毅自注意力机制和Transformer详解!_哔哩哔哩_bilibili 目录 1. 词嵌入&问题情形 2. self-attention 自注意力机制 3. 自注意力的变形 3.1 多头注意力(multi-head) 3.2 位置编码 3.3 截断自注意力&…

大模型幻觉的本质:深度=逻辑层次,宽度=组合限制,深度为n的神经网络最多只能处理n层逻辑推理,宽度为w的网络无法区分超过w+1个复杂对象的组合

大模型幻觉的本质:深度逻辑层次,宽度组合限制,深度为n的神经网络最多只能处理n层逻辑推理,宽度为w的网络无法区分超过w1个复杂对象的组合🧩 "深度逻辑层次"具体含义🔢 "宽度组合限制"具…

2419.按位与最大的最长子数组

Problem: 2419. 按位与最大的最长子数组 思路 子数组按位与的结果,不会超过子数组里的最大值(因为 a & b ≤ max(a, b))。 进一步推导,整个数组最大按位与的结果就是数组本身的最大值。 因为最大的那个元素自己作为子数组时&a…

智能时代:先管端点,再谈效率

为什么需要统一端点管理?在混合办公常态化、设备类型爆炸式增长的2025年,分散的端点如同散落各地的哨所。传统管理方式让IT团队疲于应对系统更新、漏洞修复、权限分配等重复劳动,不仅消耗60%以上的运维时间,更可能因响应延迟导致安…

Windows字体simsum.ttf的安装与Python路径设置指南

下载工具: https://fontforge.org/en-US/downloads/windows-dl/ 使用工具: 复制到c:\windows\fonts路径下面。 并复制到运行的python程序同一路径下。比如:c:\pythoncode\new\

GitHub下载项目完整配置SSH步骤详解

GitHub下载项目完整配置步骤(从零开始) 默认下好了git ,在文件夹中右键打开git bash , 如果没有请在csdn搜索教程 第一步:检查并清理现有SSH配置 # 进入.ssh目录 cd ~/.ssh# 备份并删除所有现有密钥(避免冲…

数据结构(9)栈和队列

1、栈 1.1 概念与结构 栈是一种特殊的线性表,只允许在固定的一端进行插入和删除元素的操作。进行数据插入和删除的一端称为栈顶,另一端称为栈底。栈里面的数据元素遵循后进先出的原则。栈的底层实现一般可以使用数组或者链表来实现,但数组的…

湖北大学暑期实训优秀作品:面向美丽中国的数据化可视平台

开发背景2024年1月11日,《中共中央国务院关于全面推进美丽中国建设的意见》发布,明确了建设美丽中国的总体要求、主要目标和重点任务,为我国生态文明建设提供了顶层设计和行动指南。系统简介当前,中国正以空前的力度推进生态文明建…

Ubuntu系统VScode实现opencv(c++)随机数与随机颜色

在图像处理与计算机图形学中,随机数与随机颜色的生成常用于增强图像的多样性、可视化多个目标区域、模拟自然现象以及生成测试数据等任务。通过随机化元素的颜色、位置或形状,可以使程序在动态展示、调试输出、以及数据增强等方面更加灵活和丰富。例如&a…

机器学习、深度学习与数据挖掘:三大技术领域的深度解析

基本概念与历史沿革数据挖掘起源于20世纪90年代,是数据库技术、统计学和机器学习交叉融合的产物。它经历了从简单查询到复杂知识发现的演变过程,早期阶段主要关注数据存储和检索,随着IBM、微软等公司的推动,逐渐形成了完整的知识发…

MoR vs MoE架构对比:更少参数、更快推理的大模型新选择

Google DeepMind 近期发布了关于递归混合(Mixture of Recursion)架构的研究论文,这一新型 Transformers 架构变体在学术界和工业界引起了广泛关注。该架构通过创新的设计理念,能够在保持模型性能的前提下显著降低推理延迟和模型规…

uniapp开发实现【中间放大两边缩小的轮播图】

一、效果展示 二、代码实现 <template><view><!-- 轮播图 --><view class=<