搜尋
首頁web前端Vue.js深入了解Vue的中間件管道(middleware pipeline)

深入了解Vue的中間件管道(middleware pipeline)

通常,在建置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.vueLogin.vueMovies.vue

使用以下程式碼編輯Login.vue 檔案:

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

使用以下程式碼編輯Dashboard.vue 檔案:

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

最後,將以下程式碼加入Movies.vue 檔案:

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

建立store

Vuex 而言,store 只是一個用於保存我們程式狀態的容器。它允許我們確定用戶是否經過身份驗證以及檢查用戶是否已訂閱。

在src 資料夾中,建立一個store.js 檔案並將以下程式碼新增至該檔案:

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: {
            loggedIn: false,
            isSubscribed: false
        }
    },
    getters: {
        auth(state) {
            return state.user
        }
    }
})

store 在其狀態內包含一個user 物件。 user 物件包含 loggedInisSubscribed 屬性,它可以幫助我們確定使用者是否已登入並具有有效訂閱。我們也在 store 中定義了一個 getter 來傳回 user 物件。

定義路由

在建立路由之前,應該先定義它們,並關聯將要附加到其上的對應的中間件。

除了經過驗證的使用者之外,每個人都可以存取 /login。當透過驗證的使用者存取此路由時,應重定向到 dashboard 路由。這條路由應該附有一個 guest 中間件。

只有經過驗證的使用者才能存取 /dashboard。否則使用者在存取此路由時應重定向到 /login 路由。我們把 auth 中間件與此路由相關聯。

只有透過身分驗並訂閱的使用者才能存取 /dashboard/movies。此路由受到 isSubscribedauth 中介軟體的保護。

建立路由

接下來,在src 目錄中建立一個router 資料夾,然後在該資料夾中建立一個router.js 檔案。使用以下程式碼編輯檔案:

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import store from &#39;../store&#39;

import Login from &#39;../components/Login&#39;
import Dashboard from &#39;../components/Dashboard&#39;
import Movies from &#39;../components/Movies&#39;


Vue.use(Router)

const router = new Router({
    mode: &#39;history&#39;,
    base: process.env.BASE_URL,
    routes: [
        {
            path: &#39;/login&#39;,
            name: &#39;login&#39;,
            component: Login
        },

        {
            path: &#39;/dashboard&#39;,
            name: &#39;dashboard&#39;,
            component: Dashboard,
            children: [{
                path: &#39;/dashboard/movies&#39;,
                name: &#39;dashboard.movies&#39;,
                component: Movies
            }
        ],
        }
    ]
})


export default router

在這裡,我們建立了一個新的router 實例,同時傳遞了幾個設定選項以及一個routes 屬性,它接受我們之前定義的所有路由。要注意目前這些路由還都是不受保護的。我們很快就會解決這個問題。

接下來將路由和 store 注入Vue 實例。使用下列程式碼編輯src/main.js 檔案:

import Vue from &#39;vue&#39;
import App from &#39;./App.vue&#39;
import router from &#39;./router/router&#39;
import store from &#39;./store&#39;

Vue.config.productionTip = false


new Vue({
  router,
  store,
  render: h => h(App),
}).$mount(&#39;#app&#39;)

建立中間件

src/router 目錄中建立一個middleware 資料夾,然後在該資料夾下建立guest.jsauth.jsIsSubscribed.js文件。將以下程式碼新增至 guest.js 檔案:

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

guest 中間件檢查使用者是否通過了驗證。如果通過了身份驗證就會被重定向到 dashboard 路徑。

接下來,用以下程式碼編輯 auth.js 檔案:

export default function auth ({ next, store }){
 if(!store.getters.auth.loggedIn){
     return next({
        name: &#39;login&#39;
     })
 }

 return next()
}

auth 中间件中,我们用 store 检查用户当前是否已经 authenticated。根据用户是否已经登录,我们要么继续请求,要么将其重定向到登录页面。

使用以下代码编辑 isSubscribed.js 文件:

export default function isSubscribed ({ next, store }){
    if(!store.getters.auth.isSubscribed){
        return next({
           name: &#39;dashboard&#39;
        })
    }
   
    return next()
   }

isSubscribed 中的中间件类似于 auth 中间件。我们用 store检查用户是否订阅。如果用户已订阅,那么他们可以访问预期路由,否则将其重定向回 dashboard 页面。

保护路由

现在已经创建了所有中间件,让我们利用它们来保护路由。使用以下代码编辑 src/router/router.js 文件:

import Vue from &#39;vue&#39;
import Router from &#39;vue-router&#39;
import store from &#39;../store&#39;

import Login from &#39;../components/Login&#39;
import Dashboard from &#39;../components/Dashboard&#39;
import Movies from &#39;../components/Movies&#39;

import guest from &#39;./middleware/guest&#39;
import auth from &#39;./middleware/auth&#39;
import isSubscribed from &#39;./middleware/isSubscribed&#39;

Vue.use(Router)

const router = new Router({
    mode: &#39;history&#39;,
    base: process.env.BASE_URL,
    routes: [{
            path: &#39;/login&#39;,
            name: &#39;login&#39;,
            component: Login,
            meta: {
                middleware: [
                    guest
                ]
            }
        },
        {
            path: &#39;/dashboard&#39;,
            name: &#39;dashboard&#39;,
            component: Dashboard,
            meta: {
                middleware: [
                    auth
                ]
            },
            children: [{
                path: &#39;/dashboard/movies&#39;,
                name: &#39;dashboard.movies&#39;,
                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: 这是在 routemeta 字段上定义的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 &#39;vue&#39;
import Router from &#39;vue-router&#39;
import store from &#39;../store&#39;

import Login from &#39;../components/Login&#39;
import Dashboard from &#39;../components/Dashboard&#39;
import Movies from &#39;../components/Movies&#39;

import guest from &#39;./middleware/guest&#39;
import auth from &#39;./middleware/auth&#39;
import isSubscribed from &#39;./middleware/isSubscribed&#39;
import middlewarePipeline from &#39;./middlewarePipeline&#39;

Vue.use(Router)

const router = new Router({
    mode: &#39;history&#39;,
    base: process.env.BASE_URL,
    routes: [{
            path: &#39;/login&#39;,
            name: &#39;login&#39;,
            component: Login,
            meta: {
                middleware: [
                    guest
                ]
            }
        },
        {
            path: &#39;/dashboard&#39;,
            name: &#39;dashboard&#39;,
            component: Dashboard,
            meta: {
                middleware: [
                    auth
                ]
            },
            children: [{
                path: &#39;/dashboard/movies&#39;,
                name: &#39;dashboard.movies&#39;,
                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 應用中的單一路由。你可以在(https://github.com/Dotunj/vue-middleware-pipelines)找到所有的原始碼。

相關推薦:

2020年前端vue面試題大匯總(附答案)

vue教程推薦:2020最新的5個vue.js影片教學精選

更多程式相關知識,請造訪:程式設計入門! !

以上是深入了解Vue的中間件管道(middleware pipeline)的詳細內容。更多資訊請關注PHP中文網其他相關文章!

陳述
本文轉載於:logrocket。如有侵權,請聯絡admin@php.cn刪除
es6数组怎么去掉重复并且重新排序es6数组怎么去掉重复并且重新排序May 05, 2022 pm 07:08 PM

去掉重复并排序的方法:1、使用“Array.from(new Set(arr))”或者“[…new Set(arr)]”语句,去掉数组中的重复元素,返回去重后的新数组;2、利用sort()对去重数组进行排序,语法“去重数组.sort()”。

JavaScript的Symbol类型、隐藏属性及全局注册表详解JavaScript的Symbol类型、隐藏属性及全局注册表详解Jun 02, 2022 am 11:50 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于Symbol类型、隐藏属性及全局注册表的相关问题,包括了Symbol类型的描述、Symbol不会隐式转字符串等问题,下面一起来看一下,希望对大家有帮助。

原来利用纯CSS也能实现文字轮播与图片轮播!原来利用纯CSS也能实现文字轮播与图片轮播!Jun 10, 2022 pm 01:00 PM

怎么制作文字轮播与图片轮播?大家第一想到的是不是利用js,其实利用纯CSS也能实现文字轮播与图片轮播,下面来看看实现方法,希望对大家有所帮助!

JavaScript对象的构造函数和new操作符(实例详解)JavaScript对象的构造函数和new操作符(实例详解)May 10, 2022 pm 06:16 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于对象的构造函数和new操作符,构造函数是所有对象的成员方法中,最早被调用的那个,下面一起来看一下吧,希望对大家有帮助。

JavaScript面向对象详细解析之属性描述符JavaScript面向对象详细解析之属性描述符May 27, 2022 pm 05:29 PM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于面向对象的相关问题,包括了属性描述符、数据描述符、存取描述符等等内容,下面一起来看一下,希望对大家有帮助。

javascript怎么移除元素点击事件javascript怎么移除元素点击事件Apr 11, 2022 pm 04:51 PM

方法:1、利用“点击元素对象.unbind("click");”方法,该方法可以移除被选元素的事件处理程序;2、利用“点击元素对象.off("click");”方法,该方法可以移除通过on()方法添加的事件处理程序。

整理总结JavaScript常见的BOM操作整理总结JavaScript常见的BOM操作Jun 01, 2022 am 11:43 AM

本篇文章给大家带来了关于JavaScript的相关知识,其中主要介绍了关于BOM操作的相关问题,包括了window对象的常见事件、JavaScript执行机制等等相关内容,下面一起来看一下,希望对大家有帮助。

foreach是es6里的吗foreach是es6里的吗May 05, 2022 pm 05:59 PM

foreach不是es6的方法。foreach是es3中一个遍历数组的方法,可以调用数组的每个元素,并将元素传给回调函数进行处理,语法“array.forEach(function(当前元素,索引,数组){...})”;该方法不处理空数组。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

AI Hentai Generator

AI Hentai Generator

免費產生 AI 無盡。

熱門文章

R.E.P.O.能量晶體解釋及其做什麼(黃色晶體)
2 週前By尊渡假赌尊渡假赌尊渡假赌
倉庫:如何復興隊友
1 個月前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒險:如何獲得巨型種子
4 週前By尊渡假赌尊渡假赌尊渡假赌

熱工具

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser是一個安全的瀏覽器環境,安全地進行線上考試。該軟體將任何電腦變成一個安全的工作站。它控制對任何實用工具的訪問,並防止學生使用未經授權的資源。

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)