如何在 VueJS 中實(shí)現(xiàn)中間件管道？
介紹
中間件是 Web 開發(fā)中最常用的術(shù)語之一，充當(dāng)兩個(gè)應(yīng)用程序或服務(wù)之間的中間件。中間件的強(qiáng)大概念可幫助開發(fā)人員處理與其相關(guān)的路由和模式。
在 VueJS 中，中間件可用于多個(gè)布局切換、根據(jù)用戶角色限制某些路由等。本教程將討論在VueJS 中實(shí)現(xiàn)中間件管道的步驟，并進(jìn)一步學(xué)習(xí)如何在單個(gè)路由上使用多個(gè)中間件。
讓我為您列出一些先決條件。
先決條件：在 VueJS 中實(shí)現(xiàn)中間件管道
1. 了解 VueJS 的工作原理
2. 熟悉 Vue.js 中的 vue-router 和 navigation guards，
就是這樣；我們現(xiàn)在可以走了
創(chuàng)建 VueJS 應(yīng)用程序
借助 vue-cli 工具，創(chuàng)建一個(gè) VueJS 項(xiàng)目。
vue 創(chuàng)建 vue-middleware-demo
會提示選擇Vue版本，選擇vue-2。
選擇相關(guān)版本后，vue-cli會安裝依賴，現(xiàn)在我們就可以為我們的項(xiàng)目服務(wù)了。
我們已經(jīng)成功創(chuàng)建了一個(gè)新項(xiàng)目，
安裝 vue-router
使用以下命令安裝 vue-router。這里我們將使用 yarn 來安裝 vue-router；您可以根據(jù)自己的方便選擇。
如果您不熟悉 vue-router，可以訪問Vue Router 入門博客來探索更多相關(guān)信息。
cd vue-middleware-demoyarn 添加 vue-router
使用以下命令為項(xiàng)目提供服務(wù)。
紗線運(yùn)行服務(wù)
最初的默認(rèn)用戶界面看起來像這樣。在本教程中繼續(xù)前進(jìn)，我們將在下一節(jié)中配置路由器。
創(chuàng)建路線
在本節(jié)中，我們將設(shè)置一些基本路由。我們的演示應(yīng)用程序?qū)⒂袃蓚€(gè)用于登錄和用戶配置文件的網(wǎng)頁。
該結(jié)構(gòu)將如下所示。
../vue-middleware-demo/src/pages/Login.vue../vue-middleware-demo/src/pages/UserProfile.vue
在src目錄中創(chuàng)建router.js文件來為演示應(yīng)用程序配置路由。
// 路由器.js
從“vue”導(dǎo)入 Vue；從“vue-router”導(dǎo)入 VueRouter；從“@/pages/LoginPage.vue”導(dǎo)入登錄頁面從“@/pages/UserProfile.vue”導(dǎo)入 UserProfile從“./components/HelloWorld”導(dǎo)入 HelloWorldVue.use(VueRouter)const appRoutes = [
{
小路： '/'，
名稱：'家'，
組件：HelloWorld
},
{
路徑：'/登錄'，
名稱：'登錄'，
組件：登錄頁面
},
{
路徑：'/用戶配置文件'，
名稱：'user.profile'，
組件：用戶配置文件
}]常量路線 = [...appRoutes]const router = new VueRouter({
模式：“歷史”，
路線})導(dǎo)出默認(rèn)路由器
我們幾乎完成了配置?，F(xiàn)在，在 App.vue 中添加router-view以使其可訪問。
// 應(yīng)用程序.vue
<模板>
<div id="應(yīng)用程序">
<img alt="Vue 標(biāo)志" src="./assets/logo.png">
<router-view></router-view> <!-- 更改：添加路由器視圖 -->
</div></模板>
/login 的 UI 和 /user-profileRoute 的 UI
創(chuàng)建中間件
創(chuàng)建我們的第一個(gè)中間件 guest.js，它將負(fù)責(zé)僅在用戶登錄時(shí)導(dǎo)航到用戶配置文件頁面。
// 來賓.js
導(dǎo)出默認(rèn)函數(shù) guest({next,store}){
let isLoggedIn = false // 可以通過store計(jì)算
如果（isLoggedIn）{
返回下一個(gè)（{
名稱：'家'
})
}
返回下一個(gè)（）；}
現(xiàn)在我們需要?jiǎng)?chuàng)建一個(gè)中間件管道。管道負(fù)責(zé)導(dǎo)航守衛(wèi)和中間件之間的通信。只需創(chuàng)建一個(gè)名為 middleware-pipeline.js 的文件并使用以下代碼片段。
功能中間件管道（上下文，中間件，索引）{
const nextMiddleware = 中間件[索引]
如果（！下一個(gè)中間件）{
返回 context.next
}
返回（）=> {
const nextPipeline = middlewarePipeline(
上下文、中間件、索引 + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}}導(dǎo)出默認(rèn)中間件管道
完成此文件后，在 router.js 中配置它。我們將使用導(dǎo)航守衛(wèi)和中間件管道來執(zhí)行中間件。
// 路由器.js
router.beforeEach（（到，從，下一個(gè)）=> {
/** 如果沒有應(yīng)用中間件，則導(dǎo)航到下一個(gè) */
如果（！to.meta.middleware）{
返回下一個(gè)（）
}
常量中間件 = to.meta.middleware;
const 上下文 = {
到，
從，
下一個(gè)，
// 存儲 | 您還可以將商店作為參數(shù)傳遞
}
返回中間件[0]({
...語境，
下一個(gè)：中間件管道（上下文，中間件，1）
})
})
連接現(xiàn)已建立。
下一步是在所需路徑中配置中間件，現(xiàn)在我們將在 /login 中實(shí)現(xiàn)訪客中間件，這意味著如果用戶已登錄（現(xiàn)在是硬編碼），那么它將用戶從登錄頁面重定向到主頁。
所以讓我們把這個(gè)中間件添加到我們的路由中。在要應(yīng)用中間件的地方使用以下對象。
請記?。耗枰獙?dǎo)入來賓中間件，然后才能配置它
{
路徑：'/登錄'，
名稱：'登錄'，
元：{
中間件：[
客人
]
},
組件：登錄頁面
},
在對 router.js 進(jìn)行所有這些更改之后，您的文件應(yīng)該是這樣的
// 路由器.js
從“vue”導(dǎo)入 Vue；從“vue-router”導(dǎo)入 VueRouter；從“@/pages/LoginPage.vue”導(dǎo)入登錄頁面從“@/pages/UserProfile.vue”導(dǎo)入 UserProfile從“./components/HelloWorld”導(dǎo)入 HelloWorldimport guest from "./middleware/guest" // 更改：導(dǎo)入中間件從“./middleware/middleware-pipeline”導(dǎo)入中間件管道；Vue.use(VueRouter)const appRoutes = [
{
小路： '/'，
名稱：'家'，
組件：HelloWorld
},
{
路徑：'/登錄'，
名稱：'登錄'，
元：{
中間件：[
客人
]
},
組件：登錄頁面
},
{
路徑：'/用戶配置文件'，
名稱：'user.profile'，
組件：用戶配置文件
}]常量路線 = [...appRoutes]const router = new VueRouter({
模式：“歷史”，
路線})router.beforeEach（（到，從，下一個(gè)）=> {
/** 如果沒有應(yīng)用中間件，則導(dǎo)航到下一個(gè) */
如果（！to.meta.middleware）{
返回下一個(gè)（）
}
常量中間件 = to.meta.middleware;
const 上下文 = {
到，
從，
下一個(gè)，
// 存儲 | 您還可以將商店作為參數(shù)傳遞
}
返回中間件[0]({
...語境，
下一個(gè)：中間件管道（上下文，中間件，1）
})
})導(dǎo)出默認(rèn)路由器
導(dǎo)航到 http://localhost:8080/login 你會注意到你被重定向到主頁或 http://localhost:8080/ 路由。
恭喜！您已經(jīng)成功地在 Vue.js 中實(shí)現(xiàn)了一個(gè)中間件管道。
現(xiàn)在，是時(shí)候?qū)⒍鄠€(gè)中間件添加到相同的路由了。
配置多個(gè)中間件
希望您記得我們已經(jīng)向登錄路由添加了一些額外的元數(shù)據(jù)。這就是路徑對象的樣子。
{
路徑：'/登錄'，
名稱：'登錄'，
元：{
中間件：[
客人
]
},
組件：登錄頁面
},
注意這里的中間件密鑰。中間件鍵是一種數(shù)組，這意味著我們可以將多個(gè)中間件傳遞給該鍵。
因此，讓我們再創(chuàng)建一個(gè)名為 auth.js 的中間件，我們將用于用戶身份驗(yàn)證頁面。例如，我們將這個(gè)中間件應(yīng)用到 /user-profile 頁面，這個(gè)頁面只有登錄用戶才能訪問。如果用戶未登錄，則此中間件會將用戶推送到登錄頁面。
// 授權(quán).js
導(dǎo)出默認(rèn)函數(shù) auth({next,store}){
let isLoggedIn = false // 可以通過store計(jì)算
// 讓 isLoggedIn = store.getters['sessionData/isLoggedIn']
如果（！isLoggedIn）{
返回下一個(gè)（{
名稱：'登錄'
})
}
返回下一個(gè)（）}
現(xiàn)在在 router.js 中你可以配置多個(gè)中間件，如下所示。
// 路由器.js
從“vue”導(dǎo)入 Vue；從“vue-router”導(dǎo)入 VueRouter；從“@/pages/LoginPage.vue”導(dǎo)入登錄頁面從“@/pages/UserProfile.vue”導(dǎo)入 UserProfile從“./components/HelloWorld”導(dǎo)入 HelloWorld從“./middleware/auth”導(dǎo)入身份驗(yàn)證；從“./middleware/middleware-pipeline”導(dǎo)入中間件管道；從“./middleware/guest”導(dǎo)入來賓；Vue.use(VueRouter)const appRoutes = [
{
小路： '/'，
名稱：'家'，
組件：HelloWorld
},
{
路徑：'/登錄'，
名稱：'登錄'，
組件：登錄頁面
},
{
路徑：'/用戶配置文件'，
名稱：'user.profile'，
元：{
中間件：[
授權(quán)，訪客
]
},
組件：用戶配置文件
}]常量路線 = [...appRoutes]const router = new VueRouter({
模式：“歷史”，
路線})router.beforeEach（（到，從，下一個(gè)）=> {
/** 如果沒有應(yīng)用中間件，則導(dǎo)航到下一個(gè) */
如果（！to.meta.middleware）{
返回下一個(gè)（）
}
常量中間件 = to.meta.middleware;
const 上下文 = {
到，
從，
下一個(gè)，
// 存儲 | 您還可以將商店作為參數(shù)傳遞
}
返回中間件[0]({
...語境，
下一個(gè)：中間件管道（上下文，中間件，1）
})
})導(dǎo)出默認(rèn)路由器
注意：這里 auth 和 guest 這兩個(gè)中間件是相互矛盾的，所以在這個(gè)例子中我們將看到如何配置多個(gè)中間件。
您可以利用此中間件來獲取相關(guān)數(shù)據(jù)。例如，您可以在 auth 中間件中獲取與 auth 相關(guān)的數(shù)據(jù)，并且可以忽略來賓用戶。這完全取決于您要如何使用它。
所以，我們就完成了在 VueJS 中實(shí)現(xiàn)中間件管道！
Github 存儲庫：中間件管道示例
請隨意訪問源代碼并使用以下命令克隆存儲庫。
git 克隆 https://github.com/iamsantoshyadav/vue-middleware-demo.git
結(jié)論
關(guān)于如何在 VueJS 中實(shí)現(xiàn)中間件管道的教程就是這些。中間件是保護(hù)應(yīng)用程序各種路徑的絕佳方式。這只是一個(gè)簡單的演示，說明如何開始使用 VueJS 中的中間件。如有任何建議或反饋，請寫信給我們。您還可以訪問Vuejs 教程頁面，您可以在其中找到與 GitHub 存儲庫類似的主題來嘗試代碼。
（言鼎科技）