vue router 用戶登陸功能的實例代碼
更新時間：2019年04月24日 08:44:01 作者：破殼而出的蝌蚪
這篇文章主要介紹了vue router 用戶登陸功能的實例代碼,主要用到H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知識點，本文通過實例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下
有些路由頁面需要用戶登陸之后才能訪問如（用戶中心），如果用戶沒有登陸就訪問這些頁面的話就應(yīng)該轉(zhuǎn)換到登陸頁面，登陸成功之后在進入該頁面。
需要用到的知識點有：H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta).
路由配置
在路由頁面中添加auth字段信息用于驗證當(dāng)前路由頁面是否需要登陸。
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')
}
]
});
全局前置操作
// 登陸驗證
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 // 做一個來源頁面，用于登陸成功之后跳轉(zhuǎn)
}
};
next(result);
});
注意：登陸成功之后要用 sesionStorage.setItem設(shè)置會話值
總結(jié)
以上所述是小編給大家介紹的vue router 用戶登陸功能的實例代碼,希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復(fù)大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
如果你覺得本文對你有幫助，歡迎轉(zhuǎn)載，煩請注明出處，謝謝！
相關(guān)文章
Vue3?中一個組件從創(chuàng)建到掛在,會經(jīng)過3個重點步驟：創(chuàng)建組件實例,設(shè)置組件實例,創(chuàng)建并執(zhí)行帶副作用的渲染函數(shù),本文將著重講清?創(chuàng)建組件實例、設(shè)置組件實例?這兩個過程都做了什么,這部分邏輯很簡單,但你會從中學(xué)習(xí)到?Vue?優(yōu)秀的實踐技巧,需要的朋友可以參考下2024-07-07
這篇文章主要為大家詳細(xì)介紹了如何使用Vue3自定義實現(xiàn)一個類似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)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起看看吧。2017-06-06
在Vue3中使用BabylonJs開發(fā)?3D的初體驗
這篇文章主要介紹了在?Vue3?中使用?BabylonJs?開發(fā)?3D?是什么體驗,在本文中，向您展示了如何創(chuàng)建?Vue?組件、Babylon?類、在畫布上渲染場景以及創(chuàng)建?3D?網(wǎng)格，需要的朋友可以參考下2022-07-07
虛擬列表是一種技術(shù)，它只渲染用戶當(dāng)前可見的列表項，而不是渲染整個列表，這篇文章主要來和大家聊聊虛擬列表的原理與實現(xiàn)，希望對大家有所幫助2023-05-05
使用vue-cli創(chuàng)建vue2項目的實戰(zhàn)步驟詳解
相信大部分Vue開發(fā)者都使用過vue-cli來構(gòu)建項目,它的確很方便,但對于很多初級開發(fā)者來說,還是要踩不少坑的,下面這篇文章主要給大家介紹了關(guān)于使用vue-cli創(chuàng)建vue2項目的實戰(zhàn)步驟,需要的朋友可以參考下2023-01-01
Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案
這篇文章主要介紹了Vue.$set 失效的坑 問題發(fā)現(xiàn)及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2021-07-07
這篇文章主要介紹了vue之項目中如何封裝loading加載效果，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-12-12
這篇文章主要介紹了創(chuàng)建Vue項目以及引入Iview的方法示例，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-12-12
vue3生成二維碼的方式有很多種,下面這篇文章主要給大家介紹了關(guān)于如何基于Vue3實現(xiàn)掃碼槍掃碼并生成二維碼的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06