vue之全局守衛

Vue的路由守衛是什么東西呢？

第一次接觸很懵逼，知道自己遇到了這樣一個需求，

在頁面之間進行路由跳轉時，需要進行一個判斷，如果下一個頁面是需要登錄后才能進入的頁面，那么就需要在點擊進入該頁面的時候進行守衛的判斷，判斷用戶是否登錄，如果登錄過了。就直接進入需要進入的頁面，如果沒有登錄過，則進入登錄頁面。

那么問題來了，怎么知道登錄過還是沒有登錄過呢？

在點擊登錄的時候，會請求后台的api，這時，后台會返回一個token字段。我們需要將該字段存儲到storage或者cookie中。然后在路由守衛中加入讀取出來判斷他是否存在久可以判斷是否登錄過。

一般我們選擇存入storage中，因為cookie會在每次請求時，伴隨發送。性能上沒有storage好些。

下面是一個例子：

router.js

import Vue from 'vue';
import Router from 'vue-router';
import LoginPage from '@/pages/login';
import HomePage from '@/pages/home';
import GoodsListPage from '@/pages/good-list';
import GoodsDetailPage from '@/pages/good-detail';
import CartPage from '@/pages/cart';
import ProfilePage from '@/pages/profile';
 
Vue.use(Router)
 
const router = new Router({
  routes: [
    {
      path: '/',  // 默認進入路由
      redirect: '/home'   //重定向
    },
    {
      path: '/login',
      name: 'login',
      component: LoginPage
    },
    {
      path: '/home',
      name: 'home',
      component: HomePage
    },
    {
      path: '/good-list',
      name: 'good-list',
      component: GoodsListPage
    },
    {
      path: '/good-detail',
      name: 'good-detail',
      component: GoodsDetailPage
    },
    {
      path: '/cart',
      name: 'cart',
      component: CartPage
    },
    {
      path: '/profile',
      name: 'profile',
      component: ProfilePage
    },
    {
      path: '*',   // 錯誤路由
      redirect: '/home'   //重定向
    },
  ]
});
 
// 全局路由守衛
router.beforeEach((to, from, next) => {
  console.log('navigation-guards');
  // to: Route: 即將要進入的目標 路由對象
  // from: Route: 當前導航正要離開的路由
  //如果next為空則路由正常進行跳轉，如果next不為空，則進行跳轉時，會中斷
 
  const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
  let isLogin = global.isLogin;  // 是否登錄，一般從storage中讀取
  // 未登錄狀態；當路由到nextRoute指定頁時，跳轉至login
  if (nextRoute.indexOf(to.name) >= 0) {  
    if (!isLogin) {
      console.log('what fuck');
      router.push({ name: 'login' })
    }
  }
  // 已登錄狀態；當路由到login時，如果已經登錄過，則跳轉至home
  if (to.name === 'login') {
    if (isLogin) {
      router.push({ name: 'home' });
    }
  }
  next();
});
 
export default router;