一文学会Vue中间件管道

时间 2019-11-15

标签一文学会 vue 中间件管道繁體版

原文原文链接

做者：Dotun Jolaosohtml

做者：疯狂的技术宅前端

原文：blog.logrocket.com/vue-middlew…vue

未经容许严禁转载**git

一般，在构建SPA时，须要保护某些路由。例如假设有一个只容许通过身份验证的用户访问的 dashboard 路由，咱们能够经过使用 auth 中间件来确保合法用户才能访问它。github

在本教程中，咱们将学到怎样用 Vue-Router 为Vue应用程序实现中间件管道。vue-router

什么是中间件管道？

**中间件管道（middleware pipeline）**是一堆彼此并行运行的不一样的中间件。vuex

继续前面的案例，假设在 /dashboard/movies 上有另外一个路由，咱们只但愿订阅用户能够访问。咱们已经知道要访问 dashboard 路由，你须要进行身份验证。那么应该怎样保护 /dashboard/movies 路由以确保只有通过身份验证和订阅的用户才能访问呢？经过使用中间件管道，能够将多个中间件连接在一块儿并确保它们可以并行运行。npm

开始

首先用 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-…