vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)

更新時(shí)間：2019年11月11日 16:58:46 作者：sowhat_WLQ

今天小編就為大家分享一篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧

1. 在router/index.js進(jìn)行驗(yàn)證

2. 代碼如下：

import Vue from 'vue'
import Router from 'vue-router'
import Login from '@/components/common/Login';
......

Vue.use(Router)
const router = new Router({
 routes: [{
   path: '/',
   name: Login,
   component: Login,
  },
  {
   path: '/home',
   component: Home,
   meta: {                  
    requiresAuth: true   // 要求驗(yàn)證的頁(yè)面,在此情況下其子頁(yè)面也會(huì)被驗(yàn)證.
   },
   children: [{
     path: '/paChong',
     name: 'PaChong',
     component: PaChong
    }
   ]
  }
 ]
})
router.beforeEach((to, from, next) => {
 if (to.matched.some(record => record.meta.requiresAuth)) {   // 哪些需要驗(yàn)證
  if (!sessionStorage.getItem("token")) {           // token存在條件  
   next({
    path: '/',                        // 驗(yàn)證失敗要跳轉(zhuǎn)的頁(yè)面
    query: {
      redirect: to.fullPath                 // 要傳的參數(shù)
     }
   })
  } else {
   next()
  }
 } else {
  next()                            // 確保一定要調(diào)用 next()
 }
})

export default router

以上這篇vue在路由中驗(yàn)證token是否存在的簡(jiǎn)單實(shí)現(xiàn)就是小編分享給大家的全部?jī)?nèi)容了，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

相關(guān)文章

vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開箱即用）
這篇文章主要介紹了vue+canvas實(shí)現(xiàn)炫酷時(shí)鐘效果的倒計(jì)時(shí)插件（已發(fā)布到npm的vue2插件，開箱即用） ,需要的朋友可以參考下
2018-11-11
Vue 多選框所選數(shù)量動(dòng)態(tài)變換Box的高度
在Web開發(fā)中,使用Vue.js框架可以通過(guò)ref屬性、v-model指令和計(jì)算屬性等特性實(shí)現(xiàn)元素高度的動(dòng)態(tài)調(diào)整,文章詳細(xì)介紹了如何利用Vue的功能根據(jù)多選框的選擇數(shù)量動(dòng)態(tài)改變?cè)氐母叨?并通過(guò)多個(gè)示例展示其應(yīng)用
2024-09-09
Vue使用openlayers加載天地圖
這篇文章主要為大家詳細(xì)介紹了Vue如何使用openlayers加載天地圖,文中的示例代碼講解詳細(xì),具有一定的借鑒價(jià)值,感興趣的小伙伴可以了解下
2024-02-02
基于vue.js路由參數(shù)的實(shí)例講解——簡(jiǎn)單易懂
下面小編就為大家?guī)?lái)一篇基于vue.js路由參數(shù)的實(shí)例講解——簡(jiǎn)單易懂。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2017-09-09
詳解Vue SPA項(xiàng)目?jī)?yōu)化小記
這篇文章主要介紹了詳解Vue SPA項(xiàng)目?jī)?yōu)化小記，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧
2018-07-07
淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)
本篇文章主要介紹了淺談在vue項(xiàng)目中如何定義全局變量和全局函數(shù)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
2017-10-10
VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能
這篇文章主要介紹了VUE使用 wx-open-launch-app 組件開發(fā)微信打開APP功能,本文給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下
2020-08-08
ElementUI?select彈窗在特定場(chǎng)合錯(cuò)位問(wèn)題解決方案
這篇文章主要介紹了ElementUI?select彈窗在特定場(chǎng)合錯(cuò)位問(wèn)題解決方案,本文給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧
2024-01-01
Vue清除定時(shí)器setInterval優(yōu)化方案分享
這篇文章主要介紹了Vue清除定時(shí)器setInterval優(yōu)化方案分享，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
2020-07-07
VueCli4項(xiàng)目配置反向代理proxy的方法步驟
這篇文章主要介紹了VueCli4項(xiàng)目配置反向代理proxy的方法步驟，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
2020-05-05