通常，在建置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>
<p>
<p>This is the Login component</p>
</p>
</template>使用以下程式碼編輯Dashboard.vue 檔案：
<template>
<p>
<p>This is the Dashboard component for authenticated users</p>
<router-view/>
</p>
</template>最後，將以下程式碼加入Movies.vue 檔案：
<template>
<p>
<p>This is the Movies component for authenticated and subscribed users</p>
</p>
</template>就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 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 middlewarePipelinemiddlewarePipeline 有三个参数：
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 應用中的單一路由。你可以在（https://github.com/Dotunj/vue-middleware-pipelines）找到所有的原始碼。
相關推薦：
更多程式相關知識，請造訪：程式設計入門！ ！
以上是深入了解Vue的中間件管道（middleware pipeline）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
