Vue 路由守衛安全

導讀大綱

• 路由守衛分類
• 全局路由守衛
• 單個路由守衛
• 元件路由守衛
• 路由守衛執行的完整過程

路由守衛分類

• 全局路由
• 單個路由獨享
• 元件内部路由

每個路由守衛的鈎子函數都有 3 個參數：

to

: 進入的目标路由

from

: 離開的路由

next

: 控制路由 在跳轉時進行的操作，一定要執行。

它有 4 個行為：

next()

: 鈎子都執行完了，進入到下一個路由當中。

next(false)

: 中斷路由進入下一個路由。

next('/')

: 根據你路由跳轉判斷條件來進入對應的路由，

/

為路由的

path

。

next(new Error)

: 中斷路由跳轉，錯誤會被傳遞給

router.onError()

注冊過的回調。

全局路由守衛

• beforeEach（to，from， next）

• beforeResolve（to，from， next）

• afterEach（to，from）

全局路由直接挂載到

router

執行個體上。

//全局驗證路由
const router = createRouter({
  history: createWebHashHistory(),
  routes
});

// 白名單， 不需要驗證的路由
const whiteList = ['/','/register']

router.beforeEach((to,from,next)=>{
  if(whiteList.indexOf(to.path) === 0) {
    // 放行，進入下一個路由
    next()
  } else if(!(sessionStorage.getItem('token'))){
    next('/');     
  } else {
    next()
  }  
})
           

複制

beforeEach

使用場景

「路由跳轉前觸發」

作用

「常用于登入驗證」

beforeResolve

使用場景

「在 beforeEach 和 元件内beforeRouteEnter 之後，afterEach之前調用。」

afterEach

使用場景

1. 「發生在beforeEach和beforeResolve之後，beforeRouteEnter之前。」
2. 「路由在觸發後執行」

單個路由獨享

它隻有一個 鈎子函數，

beforeEnter（to,from,next）

beforeEnter

使用場景

「在beforeEach之後執行，和它功能一樣」 ，不怎麼常用

{
        path:'/superior',
        component: Superior,
        meta:{
          icon:'el-icon-s-check',
          title:'上級檔案'
        },
        beforeEnter:(to,form,next) =>{
          
        }
      }
           

複制

元件路由守衛

特點：

元件内執行的鈎子函數

鈎子函數：

• beforeRouteEnter(to,from,next)

• beforeRouteUpdate(to,from,next)

• beforeRouteLeave(to,from,next)

beforeRouteEnter

使用場景：

1. 路由進入之前調用。
2. 不能擷取元件

   this

   執行個體 ，因為路由在進入元件之前，元件執行個體還沒有被建立。

執行順序

beforeEach

和獨享守衛

beforeEnter

之後，全局

beforeResolve

和全局

afterEach

之前調用.

beforeRouteUpdate

使用場景：

1. 在目前路由改變時，并且該元件被複用時調用，可以通過this通路執行個體。
2. 目前路由query變更時，該守衛會被調用。

beforeRouteLeave

使用場景：

導航離開該元件的對應路由時調用，可以通路元件執行個體this

路由守衛執行的完整過程

1. 導航被觸發
2. 執行 元件内部路由守衛：

   beforeRouteLeave

3. 執行 全局路由守衛

   beforeEach

4. 在重用元件内部路由守衛鈎子

   beforeRouteUpdate

5. 執行 路由中的鈎子

   beforeEnter

6. 在被激活的元件裡調用 beforeRouteEnter
7. 執行 全局的 beforeResolve 守衛 。
8. 執行 全局的 afterEach 鈎子
9. beforeCreate
10. created
11. beforeMount
12. mounted
13. 執行 beforeRouteEnter的next的回調 ，建立好的元件執行個體會作為回調函數的參數傳入。