Vue router 全局路由守衛

　　記錄一下全局路由守衛的使用；

　　方法一：定義一個數組用於檢測與管理須要登陸的頁面，全局路由守衛配合本地存儲判斷是否跳轉

import Vue from 'vue'
import Router from 'vue-router'
import store from './../store'

import Home from 'components/home/home' // 主頁組件

// 其它組件...

import Cart from 'components/cart/cart' // 購物車組件
import User from 'components/user/user' // 用戶中心組件

// 其餘組件...

import GoodsDetail from 'components/goods-detail/goods-detail' // 商品詳情組件

import { localTake } from 'common/js/localStore' // 本地存儲方法封裝

Vue.use(Router)

const router = new Router({
  routes: [
    {
      path: '/', // 默認地址
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      name: 'Home',
      meta: {
        title: '主頁',
        keepAlive: true // 須要被緩存
      }
    },
    {
      path: '/cart',
      component: Cart,
      name: 'Cart',
      meta: {
        title: '購物車',
        keepAlive: true // 須要被緩存
      }
    },
    {
      path: '/user',
      component: User,
      name: 'User',
      meta: {
        title: '個人',
        keepAlive: true // 須要被緩存
      }
    },
    {
      path: '/user-login',
      component: UserLogIn,
      name: 'UserLogIn',
      meta: {
        title: '登陸',
        keepAlive: false // 不須要被緩存
      }
    },
    {
      path: '/goods-detail',
      component: GoodsDetail,
      name: 'GoodsDetail',
      meta: {
        title: '商品詳情',
        keepAlive: true // 須要被緩存
      }
    }
  ],
  scrollBehavior (to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition
    } else {
      return {x: 0, y: 0}
    }
  }
})

// 全局路由守衛
router.beforeEach((to, from, next) => {
  const nextRoute = ['User', 'Cart', 'GoodsDetail'] // 須要登陸的頁面
  let isLogin = localTake('userMsg')  // 判斷是否登陸，本地存儲有用戶數據則視爲已經登陸
  // 未登陸狀態；當路由到 nextRoute 指定頁時，跳轉至 UserLogIn
  if (nextRoute.indexOf(to.name) >= 0) { // 檢測是否登陸的頁面
    if (!isLogin) { // 若是未登陸（本地存儲無用戶數據），而且要跳到登陸頁面
      if (from.name === 'UserLogIn') {
        next('/')
        return
      }
　　　　// 登陸後，跳到到當前頁面
      router.push({
        name: 'UserLogIn',
        params: {redirect: to.fullPath}  
      })
    }
  }
  // 已登陸狀態；當路由到 UserLogIn 時，跳轉至 Home
  if (to.name === 'UserLogIn') {
    if (isLogin) {
      next('/')
      return
    }
  }
  next() // 必須使用 next ,執行效果依賴 next 方法的調用參數
})

export default router

 

　　方法二：經過定義to.meta.needLogin（needLogin 爲自定義，路由元信息），判斷是否須要登陸

import Vue from 'vue'
import Router from 'vue-router'
import store from './../store'

import Home from 'components/home/home' // 主頁組件

// 其它組件...

import Cart from 'components/cart/cart' // 購物車組件
import User from 'components/user/user' // 用戶中心組件

// 其餘組件...

import GoodsDetail from 'components/goods-detail/goods-detail' // 商品詳情組件

import { localTake } from 'common/js/localStore' // 本地存儲方法封裝

Vue.use(Router)
const router = new Router({
  routes: [
    {
      path: '/', // 默認地址
      redirect: '/home'
    },
    {
      path: '/home',
      component: Home,
      name: 'Home',
      meta: {
        title: '主頁',
        keepAlive: true // 須要被緩存
      }
    },
    {
      path: '/cart',
      component: Cart,
      name: 'Cart',
      meta: {
        title: '購物車',
        keepAlive: true, // 須要被緩存
        needLogin: true // 須要登陸　
      }
    },
    {
      path: '/user',
      component: User,
      name: 'User',
      meta: {
        title: '個人',
        keepAlive: true, // 須要被緩存
        needLogin: true // 須要登陸
      }
    },
    {
      path: '/user-login',
      component: UserLogIn,
      name: 'UserLogIn',
      meta: {
        title: '登陸',
        keepAlive: false // 不須要被緩存
      }
    },
    {
      path: '/goods-detail',
      component: GoodsDetail,
      name: 'GoodsDetail',
      meta: {
        title: '商品詳情',
        keepAlive: true, // 須要被緩存
        needLogin: true // 須要登陸
      }
    }
  ]
})
// 全局路由守衛
router.beforeEach((to, from, next) => {
  let isLogin = localTake('userMsg') 
  if (to.meta.needLogin) {  // 判斷該路由是否須要登陸權限
    if (isLogin) { // 判斷是否已經登陸
      next()
    }
    else {
      next({
        path: '/login',
        query: {redirect: to.fullPath}  // 將跳轉的路由path做爲參數，登陸成功後跳轉到該路由
      })
    }
  }
  else {
    next()
  }
})


export default router

 

推薦使用判斷路由元信息的方法，代碼比較簡潔，能更好的維護與管理