作者：Dotun Jolaoso
作者：瘋狂的技術宅
原文：blog.logrocket.com/vue-middlew…
未經允許嚴禁轉載**
通常，在構建SPA時，需要保護某些路由。例如假設有一個只允許經過身份驗證的使用者訪問的 dashboard 路由，我們可以通過使用 auth 中介軟體來確保合法使用者才能訪問它。
在本教程中，我們將學到怎樣用 Vue-Router 為Vue應用程式實現中介軟體管道。
什麼是中介軟體管道？
**中介軟體管道（middleware pipeline）**是一堆彼此並行執行的不同的中介軟體。
繼續前面的案例，假設在 /dashboard/movies 上有另一個路由，我們只希望訂閱使用者可以訪問。我們已經知道要訪問 dashboard 路由，你需要進行身份驗證。那麼應該怎樣保護 /dashboard/movies 路由以確保只有經過身份驗證和訂閱的使用者才能訪問呢？通過使用中介軟體管道，可以將多箇中介軟體連結在一起並確保它們能夠並行執行。
開始
首先用 Vue CLI 快速構建一個新的 Vue 專案。
vue create vue-middleware-pipeline
複製程式碼安裝依賴項
建立並安裝專案目錄後，切換到新建立的目錄並從終端執行以下命令：
npm i vue-router vuex
複製程式碼Vue-router — 是Vue.js的官方路由器
Vuex — 是 Vue 的狀態管理庫
建立元件
我們的程式將包含三個元件。
Login — 此元件展示給尚未通過身份驗證的使用者。
Dashboard — 此元件展示給已登入的使用者。
Movies — 我們會向已登入並擁有有效訂閱的使用者顯示此元件。
讓我們建立這些元件。切換到 src/components 目錄並建立以下檔案：Dashboard.vue、Login.vue和Movies.vue
使用以下程式碼編輯 Login.vue 檔案：
<template>
<div>
<p>This is the Login component</p>
</div>
</template>
複製程式碼使用以下程式碼編輯 Dashboard.vue 檔案：
<template>
<div>
<p>This is the Dashboard component for authenticated users</p>
<router-view/>
</div>
</template>
複製程式碼最後，將以下程式碼新增到 Movies.vue 檔案中：
<template>
<div>
<p>This is the Movies component for authenticated and subscribed users</p>
</div>
</template>
複製程式碼建立store
就 Vuex 而言，store 只是一個用於儲存我們程式狀態的容器。它允許我們確定使用者是否經過身份驗證以及檢查使用者是否已訂閱。
在 src 資料夾中，建立一個 store.js 檔案並將以下程式碼新增到該檔案中：
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
user: {
loggedIn: false,
isSubscribed: false
}
},
getters: {
auth(state) {
return state.user
}
}
})
複製程式碼store 在其 狀態 內包含一個 user 物件。 user 物件包含 loggedIn 和 isSubscribed 屬性，它可以幫助我們確定使用者是否已登入並具有有效訂閱。我們還在 store 中定義了一個 getter 來返回 user 物件。
定義路由
在建立路由之前，應該先定義它們，並關聯將要附加到其上的對應的中介軟體。
除了通過身份驗證的使用者之外，每個人都可以訪問 /login。當通過身份驗證的使用者訪問此路由時，應重定向到 dashboard 路由。這條路由應該附有一個 guest 中介軟體。
只有通過身份驗證的使用者才能訪問 /dashboard。否則使用者在訪問此路由時應重定向到 /login 路由。我們把 auth 中介軟體與此路由相關聯。
只有通過身份驗並訂閱的使用者才能訪問 /dashboard/movies。該路由受到 isSubscribed和 auth 中介軟體的保護。
建立路由
接下來，在 src 目錄中建立一 個router 資料夾，然後在該資料夾中建立一個 router.js 檔案。使用以下程式碼編輯檔案：
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [
{
path: '/login',
name: 'login',
component: Login
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
children: [{
path: '/dashboard/movies',
name: 'dashboard.movies',
component: Movies
}
],
}
]
})
export default router
複製程式碼在這裡，我們建立了一個新的 router 例項，同時傳遞了幾個配置選項以及一個 routes 屬性，它接受我們之前定義的所有路由。要注意目前這些路由還都是不受保護的。我們很快就會解決這個問題。
接下來將路由和 store 注入Vue 例項。使用以下程式碼編輯 src/main.js 檔案：
import Vue from 'vue'
import App from './App.vue'
import router from './router/router'
import store from './store'
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App),
}).$mount('#app')
複製程式碼建立中介軟體
在 src/router 目錄中建立一個 middleware 資料夾，然後在該資料夾下建立 guest.js，auth.js和IsSubscribed.js檔案。將以下程式碼新增到 guest.js 檔案中：
export default function guest ({ next, store }){
if(store.getters.auth.loggedIn){
return next({
name: 'dashboard'
})
}
return next()
}
複製程式碼guest 中介軟體檢查使用者是否通過了身份驗證。如果通過了身份驗證就會被重定向到 dashboard 路徑。
接下來，用以下程式碼編輯 auth.js 檔案：
export default function auth ({ next, store }){
if(!store.getters.auth.loggedIn){
return next({
name: 'login'
})
}
return next()
}
複製程式碼在 auth 中介軟體中，我們用 store 檢查使用者當前是否已經 authenticated。根據使用者是否已經登入，我們要麼繼續請求，要麼將其重定向到登入頁面。
使用以下程式碼編輯 isSubscribed.js 檔案：
export default function isSubscribed ({ next, store }){
if(!store.getters.auth.isSubscribed){
return next({
name: 'dashboard'
})
}
return next()
}
複製程式碼isSubscribed 中的中介軟體類似於 auth 中介軟體。我們用 store檢查使用者是否訂閱。如果使用者已訂閱，那麼他們可以訪問預期路由，否則將其重定向回 dashboard 頁面。
保護路由
現在已經建立了所有中介軟體，讓我們利用它們來保護路由。使用以下程式碼編輯 src/router/router.js 檔案：
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'
import guest from './middleware/guest'
import auth from './middleware/auth'
import isSubscribed from './middleware/isSubscribed'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '/login',
name: 'login',
component: Login,
meta: {
middleware: [
guest
]
}
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
meta: {
middleware: [
auth
]
},
children: [{
path: '/dashboard/movies',
name: 'dashboard.movies',
component: Movies,
meta: {
middleware: [
auth,
isSubscribed
]
}
}],
}
]
})
export default router
複製程式碼在這裡，我們匯入了所有中介軟體，然後為每個路由定義了一個包含中介軟體陣列的元欄位。中介軟體陣列包含我們希望與特定路由關聯的所有中介軟體。
Vue 路由導航守衛
我們使用 Vue Router 提供的導航守衛來保護路由。這些導航守衛主要通過重定向或取消路由的方式來保護路由。
其中一個守衛是全域性守衛，它通常是在觸發路線之前呼叫的鉤子。要註冊一個全域性的前衛，需要在 router 例項上定義一個 beforeEach 方法。
const router = new Router({ ... })
router.beforeEach((to, from, next) => {
//necessary logic to resolve the hook
})
複製程式碼beforeEach 方法接收三個引數：
to: 這是我們打算訪問的路由。
from: 這是我們目前的路由。
next: 這是呼叫鉤子的 function。
執行中介軟體
使用 beforeEach 鉤子可以執行我們的中介軟體。
const router = new Router({ ...})
router.beforeEach((to, from, next) => {
if (!to.meta.middleware) {
return next()
}
const middleware = to.meta.middleware
const context = {
to,
from,
next,
store
}
return middleware[0]({
...context
})
})
複製程式碼我們首先檢查當前正在處理的路由是否有一個包含 middleware 屬性的元欄位。如果找到 middleware 屬性，就將它分配給 const 變數。接下來定義一個 context 物件，其中包含我們需要傳遞給每個中介軟體的所有內容。然後，把中介軟體陣列中的第一個中介軟體做為函式去呼叫，同時傳入 context 物件。
嘗試訪問 /dashboard 路由，你應該被重定向到 login 路由。這是因為 /src/store.js 中的 store.state.user.loggedIn 屬性被設定為 false。將 store.state.user.loggedIn 屬性改為 true，就應該能夠訪問 /dashboard 路由。
現在中介軟體正在執行，但這並不是我們想要的方式。我們的目標是實現一個管道，可以針對特定路徑執行多箇中介軟體。
return middleware[0]({ …context})
複製程式碼注意上面程式碼塊中的這行程式碼，我們只呼叫從 meta 欄位中的中介軟體陣列傳遞的第一個中介軟體。那麼我們怎樣確保陣列中包含的其他中介軟體（如果有的話）也被呼叫呢？這就是管道派上用場的地方。
建立管道
切換到 src/router 目錄，然後建立一個 middlewarePipeline.js 檔案。將以下程式碼新增到檔案中：
function middlewarePipeline (context, middleware, index) {
const nextMiddleware = middleware[index]
if(!nextMiddleware){
return context.next
}
return () => {
const nextPipeline = middlewarePipeline(
context, middleware, index + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}
}
export default middlewarePipeline
複製程式碼middlewarePipeline 有三個引數：
context: 這是我們之前建立的 context 物件，它可以傳遞給棧中的每個中介軟體。
middleware: 這是在 route 的 meta 欄位上定義的middleware 陣列本身。
index: 這是在 middleware 陣列中執行的當前中介軟體的 index。
const nextMiddleware = middleware[index]
if(!nextMiddleware){
return context.next
}
複製程式碼在這裡，我們只是在傳遞給 middlewarePipeline 函式的 index 中拔出中介軟體。如果在 index 沒有找到 middleware，則返回預設的 next 回撥。
return () => {
const nextPipeline = middlewarePipeline(
context, middleware, index + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}
複製程式碼我們呼叫 nextMiddleware 來傳遞 context， 然後傳遞 nextPipeline const。值得注意的是，middlewarePipeline 函式是一個遞迴函式，它將呼叫自身來獲取下一個在堆疊中執行的中介軟體，同時將index增加為1。
把它們放在一起
讓我們使用middlewarePipeline。像下面這段程式碼一樣編輯 src/router/router.js 檔案：
import Vue from 'vue'
import Router from 'vue-router'
import store from '../store'
import Login from '../components/Login'
import Dashboard from '../components/Dashboard'
import Movies from '../components/Movies'
import guest from './middleware/guest'
import auth from './middleware/auth'
import isSubscribed from './middleware/isSubscribed'
import middlewarePipeline from './middlewarePipeline'
Vue.use(Router)
const router = new Router({
mode: 'history',
base: process.env.BASE_URL,
routes: [{
path: '/login',
name: 'login',
component: Login,
meta: {
middleware: [
guest
]
}
},
{
path: '/dashboard',
name: 'dashboard',
component: Dashboard,
meta: {
middleware: [
auth
]
},
children: [{
path: '/dashboard/movies',
name: 'dashboard.movies',
component: Movies,
meta: {
middleware: [
auth,
isSubscribed
]
}
}],
}
]
})
router.beforeEach((to, from, next) => {
if (!to.meta.middleware) {
return next()
}
const middleware = to.meta.middleware
const context = {
to,
from,
next,
store
}
return middleware[0]({
...context,
next: middlewarePipeline(context, middleware, 1)
})
})
export default router
複製程式碼在這裡，我們使用 <code> middlewarePipeline <code>來執行棧中包含的後續中介軟體。
return middleware[0]({
...context,
next: middlewarePipeline(context, middleware, 1)
})
複製程式碼在呼叫第一個中介軟體之後，使用 middlewarePipeline 函式，還會呼叫棧中包含的後續中介軟體，直到不再有中介軟體可用。
如果你訪問 /dashboard/movies 路由，應該被重定向到 /dashboard。這是因為 user 當前是 authenticated 但沒有有效訂閱。如果將 store 中的 store.state.user.isSubscribed 屬性設定為 true，就應該可以訪問 /dashboard/movies 路由了。
結論
中介軟體是保護應用中不同路由的好方法。這是一個非常簡單的實現，可以使用多箇中介軟體來保護 Vue 應用中的單個路由。你可以在（github.com/Dotunj/vue-…
歡迎關注前端公眾號：前端先鋒，獲取前端工程化實用工具包。
