Vue-Router はミドルウェア パイプラインをどのように実装しますか?

通常、SPA を構築する場合、特定のルートを保護する必要があります。たとえば、認証されたユーザーのみにアクセスを許可するダッシュボード ルートがあるとします。認証ミドルウェアを使用することで、正当なユーザーのみがアクセスできるようにすることができます。

このチュートリアルでは、Vue-Router を使用して Vue アプリケーションのミドルウェア パイプラインを実装する方法を学びます。

ミドルウェア パイプラインとは何ですか?

ミドルウェア パイプライン は、相互に並行して実行されるさまざまなミドルウェアの束です。

前のケースの続きで、購読ユーザーのみにアクセスを許可したい別のルートが /dashboard/movies にあるとします。ダッシュボード ルートにアクセスするには認証が必要であることはすでにわかっています。それでは、認証されサブスクライブしたユーザーのみがアクセスできるようにするには、/dashboard/movies ルートをどのように保護する必要があるでしょうか?ミドルウェア パイプラインを使用すると、複数のミドルウェアをチェーンして確実に並列実行できます。

開始

まず Vue CLI を使用して、新しい Vue プロジェクトをすばやく構築します。

vue create vue-middleware-pipeline

依存関係のインストール

プロジェクト ディレクトリを作成してインストールした後、新しく作成したディレクトリに切り替えて、ターミナルから次のコマンドを実行します:

npm i vue-router vuex

Vue- router — Vue.js の公式ルーターです

Vuex — Vue の状態管理ライブラリです

コンポーネントを作成します

私たちのプログラムには次のものが含まれます3つのコンポーネント。

Login — このコンポーネントは、まだ認証されていないユーザーに表示されます。

ダッシュボード — このコンポーネントはログインしているユーザーに表示されます。

映画 — このコンポーネントは、ログインしていて有効なサブスクリプションを持つユーザーに表示されます。

これらのコンポーネントを作成しましょう。 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 プロパティが含まれており、ユーザーがログインしていて有効なサブスクリプションを持っているかどうかを判断するのに役立ちます。また、ストア内に getter を定義して、user オブジェクトを返します。 ルートの定義

ルートを作成する前に、ルートを定義し、それに接続される対応するミドルウェアを関連付ける必要があります。

/login

は、認証されたユーザーを除くすべてのユーザーがアクセスできます。認証されたユーザーがこのルートにアクセスすると、ダッシュボード ルートにリダイレクトされる必要があります。このルートには、

guest ミドルウェアが伴う必要があります。 認証されたユーザーのみが /dashboard

にアクセスできます。それ以外の場合、ユーザーはこのルートにアクセスするときに

/login ルートにリダイレクトされる必要があります。 auth ミドルウェアをこのルートに関連付けます。 認証され、購読しているユーザーのみが /dashboard/movies

にアクセスできます。ルートは

isSubscribed および auth ミドルウェアによって保護されています。 ルートの作成

次に、

src

ディレクトリに

router フォルダーを作成し、そのフォルダー内に router.js を作成します。 ＃＃＃ ファイル。次のコードを使用してファイルを編集します。 <pre class="brush:js;toolbar:false;">import Vue from &amp;#39;vue&amp;#39; import Router from &amp;#39;vue-router&amp;#39; import store from &amp;#39;../store&amp;#39; import Login from &amp;#39;../components/Login&amp;#39; import Dashboard from &amp;#39;../components/Dashboard&amp;#39; import Movies from &amp;#39;../components/Movies&amp;#39; Vue.use(Router) const router = new Router({ mode: &amp;#39;history&amp;#39;, base: process.env.BASE_URL, routes: [ { path: &amp;#39;/login&amp;#39;, name: &amp;#39;login&amp;#39;, component: Login }, { path: &amp;#39;/dashboard&amp;#39;, name: &amp;#39;dashboard&amp;#39;, component: Dashboard, children: [{ path: &amp;#39;/dashboard/movies&amp;#39;, name: &amp;#39;dashboard.movies&amp;#39;, component: Movies } ], } ] }) export default router</pre>ここでは、新しい router インスタンスを作成し、いくつかの構成オプションと、すべてを受け入れる

routes

属性を渡します。以前に定義したルート。これらのルートは現在保護されていないことに注意してください。これはすぐに修正します。 次に、ルーティングを挿入し、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')

Create middleware#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

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

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...）找到所有的源码。

英文原文地址：https://blog.logrocket.com/vue-middleware-pipelines/

为了保证的可读性，本文采用意译而非直译。

以上がVue-Router はミドルウェア パイプラインをどのように実装しますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。