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?中一個(gè)組件從創(chuàng)建到掛在,會(huì)經(jīng)過(guò)3個(gè)重點(diǎn)步驟：創(chuàng)建組件實(shí)例,設(shè)置組件實(shí)例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實(shí)例、設(shè)置組件實(shí)例?這兩個(gè)過(guò)程都做了什么,這部分邏輯很簡(jiǎn)單,但你會(huì)從中學(xué)習(xí)到?Vue?優(yōu)秀的實(shí)踐技巧,需要的朋友可以參考下2024-07-07
Vue3實(shí)現(xiàn)自定義Input組件的示例詳解
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3自定義實(shí)現(xiàn)一個(gè)類(lèi)似el-input的組件,可以v-model雙向綁定,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
Vue.js常用指令之循環(huán)使用v-for指令教程
這篇文章主要跟大家介紹了關(guān)于Vue.js常用指令之循環(huán)使用v-for指令的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起看看吧。2017-06-06
在Vue3中使用BabylonJs開(kāi)發(fā)?3D的初體驗(yàn)
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開(kāi)發(fā)?3D?是什么體驗(yàn),在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類(lèi)、在畫(huà)布上渲染場(chǎng)景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下2022-07-07
虛擬列表是一種技術(shù)，它只渲染用戶當(dāng)前可見(jiàn)的列表項(xiàng)，而不是渲染整個(gè)列表，這篇文章主要來(lái)和大家聊聊虛擬列表的原理與實(shí)現(xiàn)，希望對(duì)大家有所幫助2023-05-05
使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟詳解
相信大部分Vue開(kāi)發(fā)者都使用過(guò)vue-cli來(lái)構(gòu)建項(xiàng)目,它的確很方便,但對(duì)于很多初級(jí)開(kāi)發(fā)者來(lái)說(shuō),還是要踩不少坑的,下面這篇文章主要給大家介紹了關(guān)于使用vue-cli創(chuàng)建vue2項(xiàng)目的實(shí)戰(zhàn)步驟,需要的朋友可以參考下2023-01-01
Vue.$set 失效的坑 問(wèn)題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問(wèn)題發(fā)現(xiàn)及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了vue之項(xiàng)目中如何封裝loading加載效果，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-12-12
創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例
這篇文章主要介紹了創(chuàng)建Vue項(xiàng)目以及引入Iview的方法示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-12-12
基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼實(shí)例代碼
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實(shí)現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06