做者:Dotun Jolaoso做者:瘋狂的技術宅html
原文:https://blog.logrocket.com/vu...前端
未經容許嚴禁轉載**vue
一般,在構建SPA時,須要保護某些路由。例如假設有一個只容許通過身份驗證的用戶訪問的 dashboard 路由,咱們能夠經過使用 auth 中間件來確保合法用戶才能訪問它。git
在本教程中,咱們將學到怎樣用 Vue-Router 爲Vue應用程序實現中間件管道。程序員
中間件管道(middleware pipeline)是一堆彼此並行運行的不一樣的中間件。github
繼續前面的案例,假設在 /dashboard/movies
上有另外一個路由,咱們只但願訂閱用戶能夠訪問。咱們已經知道要訪問 dashboard 路由,你須要進行身份驗證。那麼應該怎樣保護 /dashboard/movies
路由以確保只有通過身份驗證和訂閱的用戶才能訪問呢?經過使用中間件管道,能夠將多箇中間件連接在一塊兒並確保它們可以並行運行。面試
首先用 Vue CLI 快速構建一個新的 Vue 項目。vue-router
vue create vue-middleware-pipeline
建立並安裝項目目錄後,切換到新建立的目錄並從終端運行如下命令:vuex
npm i vue-router vuex
Vue-router — 是Vue.js的官方路由器npm
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>
就 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 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 應用中的單個路由。你能夠在(https://github.com/Dotunj/vue...)找到全部的源碼。