Vue-Router怎么实现中间件管道？

通常，在构建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文件：

使用以下代码编辑Dashboard.vue文件：

最后，将以下代码添加到Movies.vue文件中：

就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， 然后传递nextPipelineconst。值得注意的是，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

在这里，我们使用 middlewarePipeline 来运行栈中包含的后续中间件。

return middleware[0]({
...context,
next: middlewarePipeline(context, middleware, 1)
})

在调用第一个中间件之后，使用middlewarePipeline函数，还会调用栈中包含的后续中间件，直到不再有中间件可用。

如果你访问/dashboard/movies路由，应该被重定向到/dashboard。这是因为user当前是authenticated但没有有效订阅。如果将store中的store.state.user.isSubscribed属性设置为true，就应该可以访问/dashboard/movies路由了。