vue實現(xiàn)未登錄訪問其他頁面自動跳轉(zhuǎn)登錄頁功能(實現(xiàn)步驟)
更新時間：2023年07月17日 11:13:27 作者：abcnull
這篇文章主要介紹了vue實現(xiàn)未登錄下訪問其他頁面自動跳轉(zhuǎn)登錄頁,本文分步驟給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
簡介
未登錄下，訪問一些頁面是不被允許或者說也沒什么作用，所以需要自動導(dǎo)向/login頁面
步驟一：依賴安裝
一般需要借助 cookie 判定，也需要使用關(guān)鍵到 vue-router
cnpm install vue-router --save cnpm install vue-cookies --save
步驟二：補充 router 攔截代碼
這里有前置條件：
- 你已經(jīng)寫好了登錄頁面組件，包括登錄后 js 中怎么存儲 cookies
- 你已經(jīng)配置好 router/index.js 中 router，并在 main.js 中成功 use 這個 router
然后你只需要在 utils/index.js 這個 router 聲明代碼中加上
import { createRouter, createWebHistory} from "vue-router"
import VueCookies from "vue-cookies";
// 異步的，路由到某個頁面之前攔截先做些處理，這里處理未登錄下所有頁面請求都轉(zhuǎn)向請求登錄頁
router.beforeEach((to, from, next) => {
if (!VueCookies.get("userInfo") && to.path !== "/login") {
router.push("/login")
}
next()
})額外
router.beforeEach是Vue Router提供的一個全局前置守衛(wèi)，它允許您在導(dǎo)航發(fā)生之前執(zhí)行一些邏輯。它可以用來進行路由權(quán)限控制、路由攔截、頁面統(tǒng)計等操作
router.beforeEach接收一個回調(diào)函數(shù)作為參數(shù)，這個回調(diào)函數(shù)會在每次路由導(dǎo)航之前被執(zhí)行。回調(diào)函數(shù)接收三個參數(shù)：
- to：即將要進入的路由對象
- from：當(dāng)前導(dǎo)航正要離開的路由對象
- next：調(diào)用該方法后，才能進入下一個鉤子。其中next有三種調(diào)用方式：next()、next(false)、next(path)
到此這篇關(guān)于vue實現(xiàn)未登錄下訪問其他頁面自動跳轉(zhuǎn)登錄頁的文章就介紹到這了,更多相關(guān)vue未登錄跳轉(zhuǎn)登錄頁內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題
這篇文章主要介紹了vue如何解決數(shù)據(jù)加載時,插值表達式閃爍問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-01-01
組件是Vue.js最強大的功能之一,組件可以擴展HTML元素,封裝可重用的代碼,這篇文章主要給大家介紹了關(guān)于vue中刷新子組件重新加載子組件三種方法,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-12-12
本篇文章主要介紹了Vue服務(wù)器渲染Nuxt學(xué)習(xí)筆記，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-01-01
在 Vue.js 中,我們可以通過自定義指令的方式來實現(xiàn)拖拽功能,使得代碼更加模塊化和可復(fù)用,本文將介紹如何基于 Vue.js 實現(xiàn)一個簡易的拖拽指令,感興趣的朋友跟隨小編一起看看吧2024-04-04
vue實現(xiàn)動態(tài)給id賦值,點擊事件獲取當(dāng)前點擊的元素的id操作
這篇文章主要介紹了vue實現(xiàn)動態(tài)給id賦值,點擊事件獲取當(dāng)前點擊的元素的id操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11
在vue項目中使用codemirror插件實現(xiàn)代碼編輯器功能
這篇文章主要介紹了在vue項目中使用codemirror插件實現(xiàn)代碼編輯器功能（代碼高亮顯示及自動提示）,本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值，需要的朋友可以參考下2019-08-08
這篇文章主要介紹了Vue中的Computed實現(xiàn)原理,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue.js如何處理數(shù)組對象中某個字段是否變?yōu)閮蓚€字段
這篇文章主要介紹了vue.js如何處理數(shù)組對象中某個字段是否變?yōu)閮蓚€字段方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-03-03
前端Vue設(shè)置cookie、刪除cookie,獲取cookie方式
這篇文章主要介紹了前端Vue設(shè)置cookie、刪除cookie，獲取cookie方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-10-10
在使用?Vue?構(gòu)建的單頁面應(yīng)用中,頁面的樣式可能因為路由切換、組件加載順序或樣式的動態(tài)加載導(dǎo)致樣式混亂,尤其是在復(fù)雜的應(yīng)用中,隨著頁面的切換或者刷新,按鈕、文字、布局等可能表現(xiàn)出不同的樣式,所以本文給大家介紹了Vue頁面加載后和刷新后的樣式差異問題的解決方案2025-01-01