Vue的路由動態重定向和導航守衛

一、重定向

重定向也是通過 routes 配置來完成，下面例子是從 /a 重定向到 /b：

const router = new VueRouter({
 routes: [
 { path: '/a', redirect: '/b' }
 ]
})

//重定向的目標也可以是一個命名的路由
const router = new VueRouter({
 routes: [
 { path: '/a', redirect: { name: 'foo' }}
 ]
})

//甚至是一個方法，動態返回重定向目標：
const router = new VueRouter({
 routes: [
 { path: '/a', redirect: to => {
  // 方法接收 目標路由 作為參數
  // return 重定向的 字符串路徑/路徑對象
 }}
 ]
})`這里寫代碼片`

//重定向示例
{ path: '/dynamic-redirect/:id?',
 redirect: to => {
 const { hash, params, query } = to
 if (query.to === 'foo') {
  return { path: '/foo', query: null }
 }
 if (hash === '#baz') {
  return { name: 'baz', hash: '' }
 }
 if (params.id) {
  return '/with-params/:id'
 } else {
  return '/bar'
 }
 }
}

先參數解構，獲取hash、params、query，然后根據獲取值進行邏輯判斷之后動態路由重定向。這里的return值是path值，而不是params值，必須是一個已經存在的path才能進行路由重定向。而且這個path不能使自身，因為作為一個重定向路由跳轉到自身還要繼續重定向，就會進行一個死循環。

現在需求如下：

為了防止用戶隨便改變路由參數而導致頁面崩潰，需要進行路由重定向，將不符合要求的參數進行重定向到一個規范頁面。比如用戶點擊按鈕跳轉/list/1但是用戶自己將1進行改變傳遞不符合規范的參數給頁面，希望能夠在用戶改變參數值后跳轉到默認的規范頁面

以上代碼實現的效果是拿到路由參數，如果用戶將頁面參數改的不符合規范就進行路由重定向。使得頁面可以獲取正確參數值。現在的效果是如果用戶輸入/1則進入正常頁面/list/1,輸入/xsajsxoal、/5、/-5 等不符合規范的參數就會跳轉進入/list/0。

雖然重定向的邏輯是沒有問題的但問題依舊存在。那用戶繼續將/list/1改成/list/xsjknxkja怎么辦呢？

可見重定向是不適合解決這個問題的。這時就用到了vue路由的導航守衛。導航守衛的實現方式如下：

{
 path: '/:type',
 name: 'normal',
 component: index,
 beforeEnter (to, from, next) {
 if (/^[0-3]$/.test(to.params.type)) {
  next()
 } else {
  next('/0')
 }
 }
}

二、路由導航守衛

正如其名，vue-router 提供的導航守衛主要用來通過跳轉或取消的方式守衛導航。有多種機會植入路由導航過程中：全局的, 單個路由獨享的, 或者組件級的。

記住參數或查詢的改變並不會觸發進入/離開的導航守衛。你可以通過觀察 $route 對象來應對這些變化，或使用 beforeRouteUpdate 的組件內守衛。

你可以使用 router.beforeEach 注冊一個全局前置守衛：

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
 // ...
})

當一個導航觸發時，全局前置守衛按照創建順序調用。守衛是異步解析執行，此時導航在所有守衛 resolve 完之前一直處於 等待中。

每個守衛方法接收三個參數：

to: Route: 即將要進入的目標 路由對象

from: Route: 當前導航正要離開的路由

next: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

next(): 進行管道中的下一個鈎子。如果全部鈎子執行完了，則導航的狀態就是 confirmed （確認的）。

next(false): 中斷當前的導航。如果瀏覽器的 URL 改變了（可能是用戶手動或者瀏覽器后退按鈕），那么 URL 地址會重置到 from 路由對應的地址。

next(‘/') 或者 next({ path: ‘/' }): 跳轉到一個不同的地址。當前的導航被中斷，然后進行一個新的導航。

next(error): (2.4.0+) 如果傳入 next 的參數是一個 Error 實例，則導航會被終止且該錯誤會被傳遞給 router.onError() 注冊過的回調。

確保要調用 next 方法，否則鈎子就不會被 resolved。

根據需求並不需要使用到全局守衛，只需要使用到路由獨享守衛，因此只需要在路由內添加beforeEnter然后判斷是否符合參數規范，是的話用next() 進入下一個鈎子,否則用next(‘/')跳轉到目標地址。 

下面寫一個例子：

1. 列舉需要判斷登錄狀態的“路由集合”，當跳轉至集合中的路由時，如果“未登錄狀態”，則跳轉到登錄頁面LoginPage；
2. 當直接進入登錄頁面LoginPage時，如果“已登錄狀態”，則跳轉到首頁HomePage；

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: Function: 一定要調用該方法來 resolve 這個鈎子。執行效果依賴 next 方法的調用參數。

  const nextRoute = ['home', 'good-list', 'good-detail', 'cart', 'profile'];
  let isLogin = global.isLogin;  // 是否登錄
  // 未登錄狀態；當路由到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;