在 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
英文地址,請注明出處:http://en.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=<