一文學會Vue中間件管道

做者：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-…

歡迎關注前端公衆號：前端先鋒，獲取前端工程化實用工具包。