如何在 VueJS 中实现中间件管道？
介绍
中间件是 Web 开发中最常用的术语之一，充当两个应用程序或服务之间的中间件。中间件的强大概念可帮助开发人员处理与其相关的路由和模式。
在 VueJS 中，中间件可用于多个布局切换、根据用户角色限制某些路由等。本教程将讨论在VueJS 中实现中间件管道的步骤，并进一步学习如何在单个路由上使用多个中间件。
让我为您列出一些先决条件。
先决条件：在 VueJS 中实现中间件管道
1. 了解 VueJS 的工作原理
2. 熟悉 Vue.js 中的 vue-router 和 navigation guards，
就是这样；我们现在可以走了
创建 VueJS 应用程序
借助 vue-cli 工具，创建一个 VueJS 项目。
vue 创建 vue-middleware-demo
会提示选择Vue版本，选择vue-2。
选择相关版本后，vue-cli会安装依赖，现在我们就可以为我们的项目服务了。
我们已经成功创建了一个新项目，
安装 vue-router
使用以下命令安装 vue-router。这里我们将使用 yarn 来安装 vue-router；您可以根据自己的方便选择。
如果您不熟悉 vue-router，可以访问Vue Router 入门博客来探索更多相关信息。
cd vue-middleware-demoyarn 添加 vue-router
使用以下命令为项目提供服务。
纱线运行服务
最初的默认用户界面看起来像这样。在本教程中继续前进，我们将在下一节中配置路由器。
创建路线
在本节中，我们将设置一些基本路由。我们的演示应用程序将有两个用于登录和用户配置文件的网页。
该结构将如下所示。
../vue-middleware-demo/src/pages/Login.vue../vue-middleware-demo/src/pages/UserProfile.vue
在src目录中创建router.js文件来为演示应用程序配置路由。
// 路由器.js
从“vue”导入 Vue；从“vue-router”导入 VueRouter；从“@/pages/LoginPage.vue”导入登录页面从“@/pages/UserProfile.vue”导入 UserProfile从“./components/HelloWorld”导入 HelloWorldVue.use(VueRouter)const appRoutes = [
{
小路： '/'，
名称：'家'，
组件：HelloWorld
},
{
路径：'/登录'，
名称：'登录'，
组件：登录页面
},
{
路径：'/用户配置文件'，
名称：'user.profile'，
组件：用户配置文件
}]常量路线 = [...appRoutes]const router = new VueRouter({
模式：“历史”，
路线})导出默认路由器
我们几乎完成了配置。现在，在 App.vue 中添加router-view以使其可访问。
// 应用程序.vue
<模板>
<div id="应用程序">
<img alt="Vue 标志" src="./assets/logo.png">
<router-view></router-view> <!-- 更改：添加路由器视图 -->
</div></模板>
/login 的 UI 和 /user-profileRoute 的 UI
创建中间件
创建我们的第一个中间件 guest.js，它将负责仅在用户登录时导航到用户配置文件页面。
// 来宾.js
导出默认函数 guest({next,store}){
let isLoggedIn = false // 可以通过store计算
如果（isLoggedIn）{
返回下一个（{
名称：'家'
})
}
返回下一个（）；}
现在我们需要创建一个中间件管道。管道负责导航守卫和中间件之间的通信。只需创建一个名为 middleware-pipeline.js 的文件并使用以下代码片段。
功能中间件管道（上下文，中间件，索引）{
const nextMiddleware = 中间件[索引]
如果（！下一个中间件）{
返回 context.next
}
返回（）=> {
const nextPipeline = middlewarePipeline(
上下文、中间件、索引 + 1
)
nextMiddleware({ ...context, next: nextPipeline })
}}导出默认中间件管道
完成此文件后，在 router.js 中配置它。我们将使用导航守卫和中间件管道来执行中间件。
// 路由器.js
router.beforeEach（（到，从，下一个）=> {
/** 如果没有应用中间件，则导航到下一个 */
如果（！to.meta.middleware）{
返回下一个（）
}
常量中间件 = to.meta.middleware;
const 上下文 = {
到，
从，
下一个，
// 存储 | 您还可以将商店作为参数传递
}
返回中间件[0]({
...语境，
下一个：中间件管道（上下文，中间件，1）
})
})
连接现已建立。
下一步是在所需路径中配置中间件，现在我们将在 /login 中实现访客中间件，这意味着如果用户已登录（现在是硬编码），那么它将用户从登录页面重定向到主页。
所以让我们把这个中间件添加到我们的路由中。在要应用中间件的地方使用以下对象。
请记住：您需要导入来宾中间件，然后才能配置它
{
路径：'/登录'，
名称：'登录'，
元：{
中间件：[
客人
]
},
组件：登录页面
},
在对 router.js 进行所有这些更改之后，您的文件应该是这样的
// 路由器.js
从“vue”导入 Vue；从“vue-router”导入 VueRouter；从“@/pages/LoginPage.vue”导入登录页面从“@/pages/UserProfile.vue”导入 UserProfile从“./components/HelloWorld”导入 HelloWorldimport guest from "./middleware/guest" // 更改：导入中间件从“./middleware/middleware-pipeline”导入中间件管道；Vue.use(VueRouter)const appRoutes = [
{
小路： '/'，
名称：'家'，
组件：HelloWorld
},
{
路径：'/登录'，
名称：'登录'，
元：{
中间件：[
客人
]
},
组件：登录页面
},
{
路径：'/用户配置文件'，
名称：'user.profile'，
组件：用户配置文件
}]常量路线 = [...appRoutes]const router = new VueRouter({
模式：“历史”，
路线})router.beforeEach（（到，从，下一个）=> {
/** 如果没有应用中间件，则导航到下一个 */
如果（！to.meta.middleware）{
返回下一个（）
}
常量中间件 = to.meta.middleware;
const 上下文 = {
到，
从，
下一个，
// 存储 | 您还可以将商店作为参数传递
}
返回中间件[0]({
...语境，
下一个：中间件管道（上下文，中间件，1）
})
})导出默认路由器
导航到 http://localhost:8080/login 你会注意到你被重定向到主页或 http://localhost:8080/ 路由。
恭喜！您已经成功地在 Vue.js 中实现了一个中间件管道。
现在，是时候将多个中间件添加到相同的路由了。
配置多个中间件
希望您记得我们已经向登录路由添加了一些额外的元数据。这就是路径对象的样子。
{
路径：'/登录'，
名称：'登录'，
元：{
中间件：[
客人
]
},
组件：登录页面
},
注意这里的中间件密钥。中间件键是一种数组，这意味着我们可以将多个中间件传递给该键。
因此，让我们再创建一个名为 auth.js 的中间件，我们将用于用户身份验证页面。例如，我们将这个中间件应用到 /user-profile 页面，这个页面只有登录用户才能访问。如果用户未登录，则此中间件会将用户推送到登录页面。
// 授权.js
导出默认函数 auth({next,store}){
let isLoggedIn = false // 可以通过store计算
// 让 isLoggedIn = store.getters['sessionData/isLoggedIn']
如果（！isLoggedIn）{
返回下一个（{
名称：'登录'
})
}
返回下一个（）}
现在在 router.js 中你可以配置多个中间件，如下所示。
// 路由器.js
从“vue”导入 Vue；从“vue-router”导入 VueRouter；从“@/pages/LoginPage.vue”导入登录页面从“@/pages/UserProfile.vue”导入 UserProfile从“./components/HelloWorld”导入 HelloWorld从“./middleware/auth”导入身份验证；从“./middleware/middleware-pipeline”导入中间件管道；从“./middleware/guest”导入来宾；Vue.use(VueRouter)const appRoutes = [
{
小路： '/'，
名称：'家'，
组件：HelloWorld
},
{
路径：'/登录'，
名称：'登录'，
组件：登录页面
},
{
路径：'/用户配置文件'，
名称：'user.profile'，
元：{
中间件：[
授权，访客
]
},
组件：用户配置文件
}]常量路线 = [...appRoutes]const router = new VueRouter({
模式：“历史”，
路线})router.beforeEach（（到，从，下一个）=> {
/** 如果没有应用中间件，则导航到下一个 */
如果（！to.meta.middleware）{
返回下一个（）
}
常量中间件 = to.meta.middleware;
const 上下文 = {
到，
从，
下一个，
// 存储 | 您还可以将商店作为参数传递
}
返回中间件[0]({
...语境，
下一个：中间件管道（上下文，中间件，1）
})
})导出默认路由器
注意：这里 auth 和 guest 这两个中间件是相互矛盾的，所以在这个例子中我们将看到如何配置多个中间件。
您可以利用此中间件来获取相关数据。例如，您可以在 auth 中间件中获取与 auth 相关的数据，并且可以忽略来宾用户。这完全取决于您要如何使用它。
所以，我们就完成了在 VueJS 中实现中间件管道！
Github 存储库：中间件管道示例
请随意访问源代码并使用以下命令克隆存储库。
git 克隆 https://github.com/iamsantoshyadav/vue-middleware-demo.git
结论
关于如何在 VueJS 中实现中间件管道的教程就是这些。中间件是保护应用程序各种路径的绝佳方式。这只是一个简单的演示，说明如何开始使用 VueJS 中的中间件。如有任何建议或反馈，请写信给我们。您还可以访问Vuejs 教程页面，您可以在其中找到与 GitHub 存储库类似的主题来尝试代码。
（言鼎科技）