一篇文章學會Vue中間件管道
通常,在構建SPA時,需要保護某些路由。例如假設有一個隻允許經過身份驗證的用戶訪問的 dashboard 路由,我們可以通過使用 auth 中間件來確保合法用戶才能訪問它。
在本教程中,我們將學到怎樣用 Vue-Router[1] 為Vue應用程序實現中間件管道。
什麼是中間件管道?
中間件管道(middleware pipeline) 是一堆彼此並行運行的不同的中間件。
繼續前面的案例,假設在 /dashboard/movies 上有另一個路由,我們隻希望訂閱用戶可以訪問。我們已經知道要訪問 dashboard 路由,你需要進行身份驗證。那麼應該怎樣保護 /dashboard/movies 路由以確保隻有經過身份驗證和訂閱的用戶才能訪問呢?通過使用中間件管道,可以將多個中間件鏈接在一起並確保它們能夠並行運行。
開始
首先用 Vue CLI[2] 快速構建一個新的 Vue 項目。
vue create vue-middleware-pipeline
安裝依賴項
創建並安裝項目目錄後,切換到新創建的目錄並從終端運行以下命令:
npm i vue-router vuex
Vue-router[3] — 是Vue.js的官方路由器
Vuex[4] — 是 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 提供的導航守衛[5]來保護路由。這些導航守衛主要通過重定向或取消路由的方式來保護路由。
其中一個守衛是全局守衛,它通常是在觸發路線之前調用的鉤子。要註冊一個全局的前衛,需要在 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} “0”)
註意上面代碼塊中的這行代碼,我們隻調用從 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 應用中的單個路由。
到此這篇關於一篇文章學會Vue中間件管道的文章就介紹到這瞭,更多相關Vue中間件管道內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
Reference
[1]Vue-Router:https://router.vuejs.org/
[2]Vue CLI:https://cli.vuejs.org/
[3]Vue-router:https://github.com/vuejs/vue-router/
[4]Vuex:https://vuex.vuejs.org/
[5]導航守衛:https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards