vue router 用戶登陸功能的實例代碼

更新時間：2019年04月24日 08:44:01 作者：破殼而出的蝌蚪

這篇文章主要介紹了vue router 用戶登陸功能的實例代碼,主要用到H5中的會話存儲（sessionStorage）、vue-router路由前置操作、路由元信息(meta)等知識點，本文通過實例代碼給大家介紹的非常詳細，需要的朋友可以參考下

有些路由頁面需要用戶登陸之后才能訪問如（用戶中心），如果用戶沒有登陸就訪問這些頁面的話就應(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.0實現(xiàn)圖片預(yù)覽組件(媒體查看器)功能
最近項目中有個場景，一組圖片、視頻、音頻、文件數(shù)據(jù)，要求點擊圖片可以放大預(yù)覽，左右可以切換音視頻、文件，支持鼠標(biāo)及各種鍵控制?縮放，左右旋轉(zhuǎn)，移動等功能,這篇文章主要介紹了Vue3.0實現(xiàn)圖片預(yù)覽組件(媒體查看器),需要的朋友可以參考下
2023-12-12
vue 彈窗時監(jiān)聽手機返回鍵關(guān)閉彈窗功能(頁面不跳轉(zhuǎn))
這篇文章主要介紹了vue 彈窗時監(jiān)聽手機返回鍵關(guān)閉彈窗功能，本文給大家介紹的非常詳細，具有一定的參考借鑒價值(頁面不跳轉(zhuǎn)) ,需要的朋友可以參考下
2019-05-05
深入了解vue中一鍵復(fù)制功能的實現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗至關(guān)重要,而提供簡單易用的復(fù)制功能是改善用戶體驗的一項關(guān)鍵功能,本文將為大家詳細介紹Vue實現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下
2023-11-11
vue實現(xiàn)的請求服務(wù)器端API接口示例
這篇文章主要介紹了vue實現(xiàn)的請求服務(wù)器端API接口,結(jié)合實例形式分析了vue針對post、get、patch、put等請求的封裝與調(diào)用相關(guān)操作技巧,需要的朋友可以參考下
2019-05-05
vue實現(xiàn)點擊隱藏與顯示實例分享
在本篇文章中小編給大家分享了vue如何實現(xiàn)點擊隱藏與顯示的相關(guān)內(nèi)容，有需要的朋友們跟著學(xué)習(xí)下。
2019-02-02
vsCode一鍵生成vue模板
之前關(guān)于vsCode一鍵生成vue模，最近需要回顧，就順便發(fā)到隨筆上了，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-06-06
vue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼
我們在輸入銀行賬號會設(shè)置每四位添加一個空格，輸入金額，每三位添加一個空格。那么，在vue，element-ui 組件中，如何實現(xiàn)呢？下面小編給大家?guī)砹藇ue中Element-ui 輸入銀行賬號每四位加一個空格的實現(xiàn)代碼，感興趣的朋友一起看看吧
2018-09-09
Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例代碼
Vue3是Vue.js的最新版本,它帶來了許多令人興奮的新特性和改進,其中一個重要的特性是Suspense,它為我們提供了一種優(yōu)雅地處理異步組件加載和錯誤處理的方式,本文給大家介紹了Vue3使用Suspense優(yōu)雅地處理異步組件加載的示例,需要的朋友可以參考下
2024-01-01
Vue3中Hooks封裝的技巧詳解
這篇文章主要來和大家分享一些關(guān)于 Vue3中Hooks封裝的技巧,希望能夠為大家在 Vue 3 項目中更好地利用 Hooks 提供一些思路和實踐經(jīng)驗
2023-12-12
vue將單頁面改造成多頁面應(yīng)用的方法
最近領(lǐng)導(dǎo)交我一個項目是使用 vue-cli 搭建的單頁面應(yīng)用。下面小編通過本文給大家介紹vue將單頁面改造成多頁面應(yīng)用的方法，感興趣的朋友一起看看吧
2018-11-11