vue 中间件,
本文主要通过一篇文章向大家介绍如何学习Vue中间件管道。什么是中间件管道？中间件管道是一堆并行运行的不同中间件。本文通过示例代码非常详细的介绍了一下，有需要的朋友可以参考一下。
一般在建SPA的时候，有些路线是需要保护的。例如，假设有一个仪表板路由只允许经过认证的用户访问，我们可以通过使用auth中间件来确保合法用户可以访问它。
在本教程中，我们将学习如何使用Vue-Router[1]为Vue应用程序实现中间件管道。
什么是中间件管道？
中间件管道是一堆彼此并行运行的不同中间件。
继续前面的例子，假设/dashboard/movies上有另一条路线，我们只希望订阅者能够访问这条路线。我们已经知道，要访问仪表板路由，您需要进行身份验证。那么，如何保护/dashboard/movies路由，以确保只有经过身份验证和订阅的用户才能访问它呢？通过使用中间件管道，您可以将多个中间件链接在一起，并确保它们可以并行运行。
开始
首先，用Vue CLI快速构建一个新的Vue项目[2]。
创建vue-中间件-管道
安装依赖项
创建并安装项目目录后，切换到新创建的目录，并从终端运行以下命令：
NPM I vue-路由器vuex
vue-router[3]—它是Vue.js的官方路由器
ex[4]—是Vue的状态管理库。
创建组件
我们的计划将包含三个部分。
登录—该组件向尚未通过身份验证的用户显示。
仪表板—该组件呈现给登录用户。
电影—我们将向已登录并拥有有效订阅的用户显示此组件。
让我们创建这些组件。切换到src/components目录并创建以下文件：Dashboard.vue、Login.vue和Movies.vue
使用以下代码编辑Login.vue文件：
模板
差异
p这是登录组件/p
/div
/模板
使用以下代码编辑Dashboard.vue文件：
模板
差异
p这是经过身份验证的用户的仪表板组件/p
路由器-视图/
/div
/模板
最后，将以下代码添加到Movies.vue文件中：
模板
差异
p这是已验证和订阅用户的电影组件/p
/div
/模板
创建store
就Vuex而言，store只是一个保存程序状态的容器。它允许我们确定用户是否已经过身份验证，并检查用户是否已经订阅。
在src文件夹中，创建store.js文件，并向其中添加以下代码：
从“vue”导入Vue
从“vuex”导入Vuex
Vue.use(Vuex)
导出默认的新Vuex。商店({
状态：{
用户：{
loggedIn:假，
已订阅：假
}
},
getters: {
授权(州){
返回状态.用户
}
}
})
存储区在其状态中包含一个用户对象。用户对象包含loggedIn和isSubscribed属性，这可以帮助我们确定用户是否登录以及是否拥有有效的订阅。我们还在存储中定义了一个getter来返回用户对象。
定义路由
在创建路由之前，您应该首先定义它们，并将相应的中间件关联到它们。
除了经过身份验证的用户，任何人都可以访问/登录。当经过身份验证的用户访问此路由时，他们应该被重定向到仪表板路由。这个路由应该伴随着一个客户中间件。
只有经过身份验证的用户才能访问/dashboard。否则，用户在访问此路由时应该被重定向到/login路由。我们将身份验证中间件与这条路线联系起来。
只有经过鉴定和订阅的用户才能访问/dashboard/movies。此路由由发布订阅和授权中间件保护。
创建路由
接下来，在src目录中创建一个router文件夹，然后在这个文件夹中创建一个router.js文件。使用以下代码编辑该文件：
从“vue”导入Vue
从“vue路由器"导入路由器
导入商店自./商店
导入登录信息自./组件/登录
从以下位置导入仪表板./组件/仪表板
从导入电影./组件/电影
Vue.use(路由器)
常量路由器=新路由器({
模式："历史",
base: process.env.BASE_URL，
路线：[
{
路径："/登录"，
名称：登录，
组件：登录
},
{
路径："/仪表板",
名称："仪表板",
组件：仪表板，
孩子：[{
路径："/仪表板/电影",
名称：“dashboard.movies”，
组件：电影
}
],
}
]
})
导出默认路由器
在这里，我们创建了一个新的路由器实例，同时传递了几个配置选项以及一个路线属性，它接受我们之前定义的所有路由。要注意目前这些路由还都是不受保护的。我们很快就会解决这个问题。
接下来将路由和商店注入某视频剪辑软件实例。使用以下代码编辑src/main。j文件：
从“vue”导入某视频剪辑软件
从导入应用程序 App.vue
从导入路由器。/路由器/路由器
从导入存储。/商店
Vue.config.productionTip=false
新Vue({
路由器，
店，
render: h=h(App)，
}).$ mount("# app ")
创建中间件
在src/路由器目录中创建一个中间件文件夹，然后在该文件夹下创建guest.js，auth.js和已发布。射流研究…文件。将以下代码添加到guest.js文件中：
导出默认功能客人({下一家，商店}){
如果(存储。吸气剂。auth。已登录){
返回下一个({
名称："仪表板"
})
}
返回下一个()
}
客人中间件检查用户是否通过了身份验证。如果通过了身份验证就会被重定向到仪表盘路径。
接下来，用以下代码编辑认证。射流研究…文件：
导出默认函数auth ({ next，store }){
如果(!store.getters.auth.loggedIn){
返回下一个({
名称："登录"
})
}
返回下一个()
}
在作家(作者的简写)中间件中，我们用商店检查用户当前是否已经已认证。根据用户是否已经登录，我们要么继续请求，要么将其重定向到登录页面。
使用以下代码编辑已发布。射流研究…文件：
导出默认功能已订阅({下一个，商店}){
如果(!商店。吸气剂。auth。已发布){
返回下一个({
名称："仪表板"
})
}
返回下一个()
}
已认购中的中间件类似于作家(作者的简写)中间件。我们用商店检查用户是否订阅。如果用户已订阅，那么他们可以访问预期路由，否则将其重定向回仪表盘页面。
保护路由
现在已经创建了所有中间件，让我们利用它们来保护路由。使用以下代码编辑src/路由器/router.js文件：
从“vue”导入某视频剪辑软件
从“vue路由器"导入路由器
导入商店自./商店
导入登录信息自./组件/登录
从以下位置导入仪表板./组件/仪表板
从导入电影./组件/电影
从导入来宾。/中间件/来宾
从导入授权。/中间件/授权
已从订阅导入。/中间件/已订阅
Vue.use(路由器)
常量路由器=新路由器({
模式："历史",
base: process.env.BASE_URL，
路线：[{
路径："/登录"，
名称：登录，
组件：登录，
元：{
中间件：[
客人
]
}
},
{
路径："/仪表板",
名称："仪表板",
组件：仪表板，
元：{
中间件：[
作家(作者的简写)
]
},
孩子：[{
路径："/仪表板/电影",
名称：“dashboard.movies”，
组件：电影，
元：{
中间件：[
auth，
已认购
]
}
}],
}
]
})
导出默认路由器
这里，我们导入所有的中间件，然后为每条路由定义一个包含中间件数组的元字段。中间件阵列包含我们希望与特定路由相关联的所有中间件。
Vue 路由导航守卫
我们使用Vue路由器提供的导航卫士[5]来保护路由。这些导航卫士主要通过重定向或取消航线来保护航线。
其中一个守卫是全局守卫，通常是在路由触发前调用的钩子。要注册一个全局先锋，需要在路由器实例上定义一个beforeEach方法。
常量路由器=新路由器({.})
router.beforeEach((收件人，发件人，下一个)={
//解析挂钩的必要逻辑
})
beforeEach方法接收三个参数：
To:这是我们打算参观的路线。
出发地：这是我们目前的路线。
接下来：这是调用钩子的函数。
运行中间件
使用beforeEach钩子来运行我们的中间件。
常量路由器=新路由器({.})
router.beforeEach((收件人，发件人，下一个)={
如果(！to.meta.middleware) {
返回下一个()
}
const中间件=to.meta.middleware
常量上下文={
到，
从，
接下来，
商店
}
返回中间件[0]({
.语境
})
})
首先，我们检查当前正在处理的路由是否有一个包含中间件属性的元字段。如果找到了中间件属性，就把它赋给const变量。接下来，定义一个上下文对象，它包含我们需要传递给每个中间件的所有内容。然后，中间件数组中的第一个中间件作为函数被调用，上下文对象被传入。
尝试/dashboard路由，您应该会被重定向到登录路由。这是因为/src/store.js中的store.state.user.loggedIn属性被设置为false。将store.state.user.loggedIn属性更改为true，您应该能够访问/dashboard路由。
现在中间件正在运行，但是这不是我们想要的方式。我们的目标是实现一个可以为特定路径运行多个中间件的管道。
返回中间件[0]({…context }“0”)
注意上面代码块中的这行代码，我们只调用从元字段中的中间件数组传递的第一个中间件。那么我们如何确保数组中包含的其他中间件(如果有的话)也被调用呢？这就是管道派上用场的地方。
创建管道
切换到src/router目录，然后创建一个middlewarePipeline.js文件。将以下代码添加到文件中：
函数middlewarePipeline(上下文、中间件、索引){
const next middleware=middleware[index]
如果(！nextMiddleware){
返回上下文。下一个
}
return ()={
const next pipeline=middleware pipeline(
上下文，中间件，索引1
)
下一个中间件({.上下文，next: nextPipeline })
}
}
导出默认的middlewarePipeline
middlewarePipeline有三个参数：
Context:这是我们之前创建的context对象，它可以传递给栈中的每个中间件。
中间件：这是在路由的元字段上定义的中间件阵列本身。
Index:这是中间件阵列中当前运行的中间件的索引。
const next middleware=middleware[index]
如果(！nextMiddleware){
返回上下文。下一个
}
在这里，我们只是取出传递给middlewarePipeline函数的索引中的中间件。如果在索引中没有找到中间件，则返回默认的下一个回调。
return ()={
const next pipeline=middleware pipeline(
上下文，中间件，索引1
)
下一个中间件({.上下文，next: nextPipeline })
}
我们调用nextMiddleware来传递上下文，然后传递nextPipeline const。值得注意的是，middlewarePipeline函数是一个递归函数，它会调用自身来获取堆栈中运行的下一个中间件，同时将索引增加到1。
把它们放在一起
让我们使用middlewarePipeline。编辑src/router/router.js文件，如下所示：
从“vue”导入Vue
从“vue路由器”导入路由器
导入商店自./商店
导入登录名自./组件/登录
从以下位置导入仪表板./组件/仪表板
从导入电影./组件/电影
从导入来宾。/中间件/来宾
从导入授权。/中间件/授权
已从订阅导入。/中间件/已订阅
从""导入中间件管道./middlewarePipeline
Vue.use(路由器)
常量路由器=新路由器({
模式："历史",
base: process.env.BASE_URL，
路线：[{
路径："/登录"，
名称：登录，
组件：登录，
元：{
中间件：[
客人
]
}
},
{
路径："/仪表板",
名称："仪表板",
组件：仪表板，
元：{
中间件：[
作家(作者的简写)
]
},
孩子：[{
路径："/仪表板/电影",
名称：“dashboard.movies”，
组件：电影，
元：{
中间件：[
auth，
已认购
]
}
}],
}
]
})
router.beforeEach(收件人，发件人，下一个)={
如果(!to.meta.middleware) {
返回下一个()
}
常数中间件=to.meta .中间件
常量上下文={
到，
从，
接下来，
商店
}
返回中间件[0]({
.语境，
下一个：middlewarePipeline(上下文，中间件，1)
})
})
导出默认路由器
在这里，我们使用代码中间件管道代码来运行栈中包含的后续中间件。
返回中间件[0]({
.语境，
下一个：middlewarePipeline(上下文，中间件，1)
})
在调用第一个中间件之后，使用中间件管道函数，还会调用栈中包含的后续中间件，直到不再有中间件可用。
如果你访问/仪表板/电影路由，应该被重定向到/仪表板。这是因为用户当前是鉴定但没有有效订阅。如果将商店中的商店。状态。用户。发行属性设置为没错，就应该可以访问/仪表板/电影路由了。
总结
中间件是保护应用中不同路由的好方法。这是一个非常简单的实现，可以使用多个中间件来保护某视频剪辑软件应用中的单个路由。
到此这篇关于一篇文章学会某视频剪辑软件中间件管道的文章就介绍到这了，更多相关某视频剪辑软件中间件管道内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
Reference
[1]Vue-路由器：https://路由器。Vue js。组织/
[2]Vue CLI:https://cli.vuejs.org/
[3]Vue-router:https://github。com/Vue js/Vue-router/
[4]Vuex:https://vuex.vuejs.org/
[5]导航守卫：https://路由器。vue js。org/guide/advanced/navigation-guard。html #保护之前的全局
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。