uniapp項目頁面跳轉(zhuǎn)登錄攔截uni.addInterceptor使用及說明
更新時間：2026年03月23日 09:22:50 作者：木子靜靜
這篇文章主要介紹了uniapp項目頁面跳轉(zhuǎn)登錄攔截uni.addInterceptor使用及說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教
uniapp項目中頁面跳轉(zhuǎn)的登錄攔截，可使用uni.addInterceptor（攔截器）進(jìn)行攔截，官方文檔說明，
具體使用方法如下：
1.創(chuàng)建一個permission.js文件
//設(shè)置白名單，白名單中的路徑不進(jìn)行攔截
const whiteList = ['pages/login/index','pages/home/index']
// 檢查地址白名單
function checkWhite(url) {
const path = url.split('?')[0]
return whiteList.indexOf(path) !== -1
}
// 登錄頁面路徑
const loginPage = "/pages/login/index"
//要攔截的跳轉(zhuǎn)方式
const list = ['navigateTo', 'redirectTo', 'reLaunch','switchTab']
list.forEach(item => {
uni.addInterceptor(item, {
invoke(to) {
//可以根據(jù)自己實際需求寫
if (uni.getStorageSync('token')) {
if (to.url === loginPage) {
uni.reLaunch({
url: "/"
})
}
return true
} else {
if (checkWhite(to.url)) {
return true
}
uni.reLaunch({
url: loginPage
})
return false
}
},
fail(err) {
console.log(err)
}
})
})
2.將permission.js文件引入到main.js中
//main.js
import Vue from 'vue'
import App from './App'
import './permission'
const app = new Vue({
...App
})
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關(guān)文章
在我們開發(fā)項目的時候,有時候我們不希望用戶對我們的頁面進(jìn)行操作,尤其是輸入框之類的,這篇文章主要給大家介紹了Vue中禁止編輯的常見方法,文中介紹的方法主要以禁止編輯輸入框為例,需要的朋友可以參考下2024-02-02
這篇文章主要介紹了使用Vue?CLI配置代碼壓縮、加密和混淆功能,通過配置 vue.config.js 文件，我們可以使用 Vue CLI 輕松實現(xiàn)對 Vue 應(yīng)用程序代碼的壓縮、加密和混淆，需要的朋友可以參考下2023-06-06
這篇文章主要給大家介紹了關(guān)于Vue 3.x+axios跨域方案的踩坑指南，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用Vue 3.x具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
這篇文章主要為大家詳細(xì)介紹了vue貨幣過濾器的實現(xiàn)方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
SpringBoot結(jié)合Vue3實現(xiàn)簡單的前后端交互
本文主要介紹了SpringBoot結(jié)合Vue3實現(xiàn)簡單的前后端交互,結(jié)合實際案例,說明了如何實現(xiàn)前后端數(shù)據(jù)的交互,具有一定的?參考價值,感興趣的可以了解一下2023-08-08
這篇文章主要為大家詳細(xì)介紹了Vue.js雙向綁定實現(xiàn)原理，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-12-12
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)簡易選項卡功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
mpvue中配置vuex并持久化到本地Storage圖文教程解析
這篇文章主要介紹了mpvue中配置vuex并持久化到本地Storage的教程詳解,# 配置vuex和在vue中相同，只是mpvue有一個坑，就是不能直接在new Vue的時候傳入store。本文分步驟給大家介紹的非常詳細(xì)，需要的朋友參考下吧2018-03-03
這篇文章主要介紹了Vue 實現(xiàn)展開折疊效果的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
vue實現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)
這篇文章主要介紹了vue實現(xiàn)導(dǎo)出Word文件(數(shù)據(jù)流方式)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06