En savoir plus sur le pipeline middleware de Vue

Généralement, lors de la construction d'un SPA, certains itinéraires doivent être protégés. Par exemple, supposons que nous ayons une route de tableau de bord qui permet uniquement aux utilisateurs authentifiés d'y accéder. Nous pouvons garantir que seuls les utilisateurs légitimes peuvent y accéder en utilisant un middleware d'authentification.

Dans ce tutoriel, nous apprendrons comment utiliser Vue-Router pour implémenter des pipelines middleware pour les applications Vue.

Qu'est-ce qu'un pipeline middleware ?

Un pipeline middleware est un ensemble de middlewares différents qui fonctionnent en parallèle les uns avec les autres.

En continuant avec le cas précédent, disons qu'il existe un autre itinéraire sur /dashboard/movies que nous souhaitons accessible uniquement aux utilisateurs abonnés. Nous savons déjà que pour accéder au parcours du tableau de bord, il faut s'authentifier. Alors, comment la route /dashboard/movies doit-elle être protégée pour garantir que seuls les utilisateurs authentifiés et abonnés y ont accès ? En utilisant des pipelines middleware, vous pouvez enchaîner plusieurs middlewares et garantir qu’ils fonctionnent en parallèle.

Démarrer

Utilisez d'abord Vue CLI pour créer rapidement un nouveau projet Vue.

vue create vue-middleware-pipeline

Installer les dépendances

Après avoir créé et installé le répertoire du projet, passez au répertoire nouvellement créé et exécutez la commande suivante depuis le terminal :

npm i vue-router vuex

Vue-router — est le routeur officiel de Vue.js

Vuex — est la bibliothèque de gestion d'état de Vue

Créer des composants

Créer des composants

Notre programme comportera trois volets.

Connexion — Ce composant est affiché pour les utilisateurs qui ne se sont pas encore authentifiés.

Tableau de bord — Ce composant est affiché pour les utilisateurs connectés.

Filmssrc/components — Nous afficherons ce composant aux utilisateurs connectés et disposant d'un abonnement actif. Dashboard.vueLogin.vueCréons ces composants. Basculez vers le répertoire Movies.vue et créez les fichiers suivants :

,

et Login.vue

Modifiez le fichier Dashboard.vue en utilisant le code suivant :

<template>
  <p>
    <p>This is the Login component</p>
  </p>
</template>

Modifiez en utilisant le code suivantMovies.vue Fichier :

<template>
  <p>
    <p>This is the Dashboard component for authenticated users</p>
    <router-view/>
  </p>
</template>

Enfin, ajoutez le code suivant au fichier :

<template>
  <p>
    <p>This is the Movies component for authenticated and subscribed users</p>
  </p>
</template>

Créer une boutiqueVuex

Dans dans le cas de store.js , le magasin n'est qu'un conteneur utilisé pour sauvegarder l'état de notre programme. Il nous permet de déterminer si l'utilisateur est authentifié et de vérifier s'il est abonné.

Dans le dossier src, créez un fichier user et ajoutez le code suivant au fichier : user

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
        }
    }
})

loggedInstore contient un objet isSubscribed à l'intérieur de son état. L'objet getter contient les attributs user et

, qui nous aident à déterminer si l'utilisateur est connecté et dispose d'un abonnement valide. Nous définissons également un

dans le magasin pour retourner les objets.

Définir les routes

/loginAvant de créer des routes, vous devez les définir et associer le middleware correspondant qui leur sera attaché. guest

Accessible à tous sauf aux utilisateurs authentifiés

. Lorsqu'un utilisateur authentifié accède à cette route, il doit être redirigé vers la route du tableau de bord. Cette route doit être accompagnée d'un /dashboard middleware. /loginauthSeuls les utilisateurs authentifiés peuvent accéder à

. Sinon, les utilisateurs doivent être redirigés vers la route

lorsqu'ils accèdent à cette route. Nous associons le middleware /dashboard/movies à cette route. isSubscribedauthSeuls les utilisateurs authentifiés et abonnés peuvent accéder à

. L'itinéraire est protégé par les middlewares

et .

Créer un itinérairesrcrouterrouter.jsEnsuite, créez un dossier

dans le répertoire

, puis créez un fichier router dans ce dossier. Editez le fichier avec le code suivant : routes

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

Ici, nous créons une nouvelle instance

, en passant quelques options de configuration ainsi qu'un attribut src/main.js qui accepte toutes les routes que nous avons définies précédemment. Veuillez noter que ces itinéraires ne sont actuellement pas protégés. Nous allons résoudre ce problème bientôt.

Ensuite, injectez le routage et stockez-le dans l'instance Vue. Modifiez le fichier avec le code suivant :

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')

Créez un middleware src/routermiddlewareguest.jsCréez un dossier auth.js dans le répertoire IsSubscribed.js puis dans ce dossier Créer Fichiers guest.js,

et

ci-dessous. Ajoutez le code suivant au fichier guest : dashboard

export default function guest ({ next, store }){
    if(store.getters.auth.loggedIn){
        return next({
           name: 'dashboard'
        })
    }
   
    return next()
   }

Le middleware vérifie si l'utilisateur est authentifié. Si l'authentification est réussie, vous serez redirigé vers le chemin auth.js.

Ensuite, éditez le fichier avec le code suivant :

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 函数，还会调用栈中包含的后续中间件，直到不再有中间件可用。

Si vous accédez à l'itinéraire /dashboard/movies, vous devriez être redirigé vers /dashboard. En effet, user est actuellement authenticated mais n'a aucun abonnement actif. Si vous définissez l'attribut store dans store.state.user.isSubscribed sur true, vous devriez pouvoir accéder à l'itinéraire /dashboard/movies.

Conclusion

Le middleware est un excellent moyen de protéger différentes routes dans votre application. Il s'agit d'une implémentation très simple qui peut utiliser plusieurs middlewares pour protéger une seule route dans une application Vue. Vous pouvez trouver tout le code source sur (https://github.com/Dotunj/vue-middleware-pipelines).

Recommandations associées :

Résumé des questions d'entretien Front-end Vue 2020 (avec réponses)

tutoriel vue Recommandé : Les 5 dernières sélections de didacticiels vidéo vue.js en 2020

Pour plus de connaissances liées à la programmation, veuillez visiter : Introduction à la programmation ! !

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!