Yiwen изучит конвейер промежуточного программного обеспечения Vue

Vue.js

Автор: Дотун Джолаосо

Автор: сумасшедший технарь

оригинал:blog.log Rocket.com/v UE-middle W…

Воспроизведение без разрешения строго запрещено**

Часто при построении 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.

Создать компонент

Наши программы будут состоять из трех компонентов.

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>

создать магазин

СразуVuexОдним словом, хранилище — это просто контейнер для сохранения состояния нашей программы. Это позволяет нам определить, аутентифицирован ли пользователь, и проверить, подписан ли пользователь.

В папке 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
        }
    }
})

Магазин содержит в своем состоянии auserобъект.userобъект содержитloggedInа такжеisSubscribedсвойство, которое помогает нам определить, вошел ли пользователь в систему и имеет ли он действительную подписку. Мы также определяемgetterвозвращатьuserобъект.

определить маршруты

Прежде чем создавать маршруты, вы должны определить их и связать с ними соответствующее промежуточное ПО.

Доступны для всех, кроме аутентифицированных пользователей/login. Когда вы получите доступ к этому маршруту по аутентификации пользователя, маршрутизация должна быть перенаправлена ​​на приборную панель. Этот маршрут должен сопровождаться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свойство, которое принимает все маршруты, которые мы определили ранее. Обратите внимание, что эти маршруты в настоящее время не защищены. Мы исправим это в ближайшее время.

Затем введите маршрут и сохраните его в экземпляре 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Проверьте, подписан ли пользователь. Если пользователь подписан, он может получить доступ к ожидаемому маршруту, в противном случае перенаправить его обратно на страницу панели инструментов.

защитить маршрутизацию

Теперь, когда все промежуточное ПО создано, давайте воспользуемся им для защиты маршрута. Изменить с помощью следующего кода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/do hoard/v UE-…

Добро пожаловать в общедоступную учетную запись внешнего интерфейса: Front-end Pioneer, получите набор практических инструментов для разработки внешнего интерфейса.

Категории