vue router 用戶登陸功能的實(shí)例代碼
有些路由頁(yè)面需要用戶登陸之后才能訪問(wèn)如（用戶中心），如果用戶沒(méi)有登陸就訪問(wèn)這些頁(yè)面的話就應(yīng)該轉(zhuǎn)換到登陸頁(yè)面，登陸成功之后在進(jìn)入該頁(yè)面。
需要用到的知識(shí)點(diǎn)有：H5中的會(huì)話存儲(chǔ)（sessionStorage）、vue-router路由前置操作、路由元信息(meta).
路由配置
在路由頁(yè)面中添加auth字段信息用于驗(yàn)證當(dāng)前路由頁(yè)面是否需要登陸。
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: "/login",
name: "login",
component: () => import("./views/Login.vue")
},
{
path: "/member",
meta: {
auth: true // 用于判斷當(dāng)前路由是否需要登陸
},
component: () => import('./views/Member.vue')
}
]
});
全局前置操作
// 登陸驗(yàn)證
const Token = "XH-TOKEN";
router.beforeEach((to, from, next) => {
let validator = typeof to.meta.auth == "undefined" || !to.meta.auth || sessionStorage.getItem(Token);
let result = validator ? {} : {
name: "login", // 跳轉(zhuǎn)到命名路由
query: {
url: to.fullPath // 做一個(gè)來(lái)源頁(yè)面，用于登陸成功之后跳轉(zhuǎn)
}
};
next(result);
});
注意：登陸成功之后要用 sesionStorage.setItem設(shè)置會(huì)話值
總結(jié)
以上所述是小編給大家介紹的vue router 用戶登陸功能的實(shí)例代碼,希望對(duì)大家有所幫助，如果大家有任何疑問(wèn)請(qǐng)給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持！
如果你覺(jué)得本文對(duì)你有幫助，歡迎轉(zhuǎn)載，煩請(qǐng)注明出處，謝謝！
相關(guān)文章
Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器)功能
最近項(xiàng)目中有個(gè)場(chǎng)景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點(diǎn)擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標(biāo)及各種鍵控制?縮放，左右旋轉(zhuǎn)，移動(dòng)等功能,這篇文章主要介紹了Vue3.0實(shí)現(xiàn)圖片預(yù)覽組件(媒體查看器),需要的朋友可以參考下2023-12-12
vue 彈窗時(shí) 監(jiān)聽(tīng)手機(jī)返回鍵關(guān)閉彈窗功能(頁(yè)面不跳轉(zhuǎn))
這篇文章主要介紹了vue 彈窗時(shí) 監(jiān)聽(tīng)手機(jī)返回鍵關(guān)閉彈窗功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值(頁(yè)面不跳轉(zhuǎn)) ,需要的朋友可以參考下2019-05-05
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡(jiǎn)單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11
vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口示例
這篇文章主要介紹了vue實(shí)現(xiàn)的請(qǐng)求服務(wù)器端API接口,結(jié)合實(shí)例形式分析了vue針對(duì)post、get、patch、put等請(qǐng)求的封裝與調(diào)用相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
vue實(shí)現(xiàn)點(diǎn)擊隱藏與顯示實(shí)例分享
在本篇文章中小編給大家分享了vue如何實(shí)現(xiàn)點(diǎn)擊隱藏與顯示的相關(guān)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。2019-02-02
之前關(guān)于vsCode一鍵生成vue模，最近需要回顧，就順便發(fā)到隨筆上了，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-06-06
vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼
我們?cè)谳斎脬y行賬號(hào)會(huì)設(shè)置每四位添加一個(gè)空格，輸入金額，每三位添加一個(gè)空格。那么，在vue，element-ui 組件中，如何實(shí)現(xiàn)呢？下面小編給大家?guī)?lái)了vue中Element-ui 輸入銀行賬號(hào)每四位加一個(gè)空格的實(shí)現(xiàn)代碼，感興趣的朋友一起看看吧2018-09-09
Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例代碼
Vue3是Vue.js的最新版本,它帶來(lái)了許多令人興奮的新特性和改進(jìn),其中一個(gè)重要的特性是Suspense,它為我們提供了一種優(yōu)雅地處理異步組件加載和錯(cuò)誤處理的方式,本文給大家介紹了Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例,需要的朋友可以參考下2024-01-01
這篇文章主要來(lái)和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠?yàn)榇蠹以?nbsp;Vue 3 項(xiàng)目中更好地利用 Hooks 提供一些思路和實(shí)踐經(jīng)驗(yàn)2023-12-12
vue將單頁(yè)面改造成多頁(yè)面應(yīng)用的方法
最近領(lǐng)導(dǎo)交我一個(gè)項(xiàng)目是使用 vue-cli 搭建的單頁(yè)面應(yīng)用。下面小編通過(guò)本文給大家介紹vue將單頁(yè)面改造成多頁(yè)面應(yīng)用的方法 ，感興趣的朋友一起看看吧2018-11-11