当前位置: 主页>网站教程>JS教程> Vue-Router如何实现中心件管道？

分享文章到：

Vue-Router如何实现中心件管道？

发布时间：09/01 来源：未知浏览：关键词：

平常，在构建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 路由了。