首页 > 资讯 > 前端开发 > JavaScript >一篇文章学会Vue中间件管道

748

分享到

一篇文章学会Vue中间件管道

2024-04-02 19:04:59 748人浏览泡泡鱼

摘要

通常，在构建SPA时，需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 dashboard 路由，我们可以通过使用 auth 中间件来确保合法用户才能访问它。在本教程

通常，在构建SPA时，需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 dashboard 路由，我们可以通过使用 auth 中间件来确保合法用户才能访问它。

在本教程中，我们将学到怎样用 Vue-Router[1] 为Vue应用程序实现中间件管道。

什么是中间件管道？

中间件管道（middleware pipeline）是一堆彼此并行运行的不同的中间件。

继续前面的案例，假设在 /dashboard/movies 上有另一个路由，我们只希望订阅用户可以访问。我们已经知道要访问 dashboard 路由，你需要进行身份验证。那么应该怎样保护 /dashboard/movies 路由以确保只有经过身份验证和订阅的用户才能访问呢？通过使用中间件管道，可以将多个中间件链接在一起并确保它们能够并行运行。

开始

首先用 Vue CLI[2] 快速构建一个新的 Vue 项目。


vue create vue-middleware-pipeline

安装依赖项

创建并安装项目目录后，切换到新创建的目录并从终端运行以下命令：


npm i vue-router vuex

Vue-router[3] — 是vue.js的官方路由器

Vuex[4] — 是 Vue 的状态管理库

创建组件

我们的程序将包含三个组件。

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>

创建store

就 Vuex 而言，store 只是一个用于保存我们程序状态的容器。它允许我们确定用户是否经过身份验证以及检查用户是否已订阅。

在 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
        }
    }
})

store 在其状态内包含一个 user 对象。user 对象包含 loggedIn 和 isSubscribed 属性，它可以帮助我们确定用户是否已登录并具有有效订阅。我们还在 store 中定义了一个 getter 来返回 user 对象。

定义路由

在创建路由之前，应该先定义它们，并关联将要附加到其上的对应的中间件。

除了通过身份验证的用户之外，每个人都可以访问 /login。当通过身份验证的用户访问此路由时，应重定向到 dashboard 路由。这条路由应该附有一个 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 属性，它接受我们之前定义的所有路由。要注意目前这些路由还都是不受保护的。我们很快就会解决这个问题。

接下来将路由和 store 注入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检查用户是否订阅。如果用户已订阅，那么他们可以访问预期路由，否则将其重定向回 dashboard 页面。

保护路由

现在已经创建了所有中间件，让我们利用它们来保护路由。使用以下代码编辑 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 提供的导航守卫[5]来保护路由。这些导航守卫主要通过重定向或取消路由的方式来保护路由。

其中一个守卫是全局守卫，它通常是在触发路线之前调用的钩子。要注册一个全局的前卫，需要在 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} "0")
注意上面代码块中的这行代码，我们只调用从 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 应用中的单个路由。

到此这篇关于一篇文章学会Vue中间件管道的文章就介绍到这了,更多相关Vue中间件管道内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

Reference

[1]Vue-Router:https://router.vuejs.org/

[2]Vue CLI:Https://cli.vuejs.org/

[3]Vue-router:https://GitHub.com/vuejs/vue-router/

[4]Vuex:https://vuex.vuejs.org/

[5]导航守卫:https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 一篇文章学会Vue中间件管道

本文链接: https://www.lsjlt.com/news/128612.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档

去做题

猜你喜欢

一篇文章学会Vue中间件管道

通常，在构建SPA时，需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 dashboard 路由，我们可以通过使用 auth 中间件来确保合法用户才能访问它。在本教程...

99+

2024-04-02
一篇文章带你学会JavaScript计时事件

目录JavaScript 计时事件setInterval() 方法clearInterval() 方法setTimeout() 方法clearTimeout() 方法总结 ...

99+

2022-11-16

javascript计时事件 js 计时 js常用事件
一篇文章学会GO语言中的变量

目录1.标识符2.关键字3.变量3.1 Go语言中变量的声明3.2 批量声明3.3 变量的初始化3.4 短变量声明3.5匿名变量4.常量5.iota总结1.标识符在编程语言中标识符...

99+

2024-04-02
一篇文章学会jsBridge的运行机制

目录js调用方式安卓1.js调用原生2.原生调用jsios总结我司的APP是一个典型的混合开发APP，内嵌的都是前端页面，前端页面要做到和原生的效果相似，就避免不了调用一些原生的方法...

99+

2024-04-02
一篇文章带你学会Spring MVC表单标签

目录form 标签input 标签password 标签checkbox 标签checkboxes 标签radiobutton 与 radiobuttons 标签select 与 o...

99+

2023-03-24

springmvc表单标签用法示例 springmvc表单标签 springmvc接收表单参数
一篇文章教会你部署vue项目到docker

目录第一步第二步，生成镜像第三步，生成(启动)一个容器总结让我在5分钟你教不会你把项目部署到docker，前提是你得服务器装有docker，这里方便装宝塔，大佬当我没说。...

99+

2024-04-02
轻松学会Java导出word，一篇文章就够了！

很多小伙伴在工作中，可能又这样一个需求：根据word模板去填充数据，变成我们想要的word文档，这是很多刚进入职场的小白都会碰到的需求。当遇上这种需求，我们可以通过这篇文章要讲的poi-tl ...

99+

2023-09-22

java word 开发语言
一篇文章教你学会js实现弹幕效果

目录新建一个html文件：搞出初始模版HTML添加CSS填充js逻辑代码动画效果下面是弹幕效果：相信小伙伴们都看过了，那么它实现的原理是什么呢，那么我们前端怎么用我们web技术...

99+

2024-04-02
一篇文章学会java死锁与CPU 100%的排查

目录 00 本文简介01 Java死锁排查和解决1、啥是死锁？2、为啥子会出现死锁？3、怎么排查代码中出现了死锁？【重点来了】第一个姿势：使用 jps + jstack第二个姿势：使...

99+

2024-04-02
一篇文章教你学会使用Python绘制甘特图

目录优点局限一日一书用来制作甘特图的专业工具也不少，常见的有：Microsoft Office Project、GanttProject、WARCHART XGantt、jQuer...

99+

2024-04-02
一篇文章学会两种将python打包成exe的方式

目录前言详细步骤图形窗口打包总结前言 python 可以做网站应用，也可以做客户端应用。但是客户端应用需要运行 py 脚本，如果用户不懂 python 就是一件比较麻烦的事情。幸好 ...

99+

2024-04-02
一篇文章告诉你如何编写Vue插件

目录什么是插件编写插件使用插件总结什么是插件在Vue框架中，如果需要给Vue增加一些我们需要的功能，Vue给我留了一个插件的方式，我们可以编写自己的插件，然后在Vue中去注册插件，...

99+

2024-04-02
一篇文章教你用Python实现一个学生管理系统

目录片头源码：总结片头 Python看了差不多三四天吧，基本上给基础看差不多了。写个管理系统吧，后续不出意外SQL、文件存储版本都会更。学习Python感想： ...

99+

2024-04-02
一篇文章弄懂Java8中的时间处理

目录前言LocalDateTimeZonedDateTimeInstant总结前言 java8借鉴了第三方日期库joda很多的优点 java.time包类名描述Instant时间戳...

99+

2024-04-02
Vue中间件管道如何应用

这篇文章主要介绍“Vue中间件管道如何应用”的相关知识，小编通过实际案例向大家展示操作过程，操作方法简单快捷，实用性强，希望这篇“Vue中间件管道如何应用”文章能帮助大家解决问题。什么是中间件管道？中间件管道（middleware pipe...

99+

2023-07-04
一篇文章带你了解Vue组件的创建和使用

目录一、什么是组件？二、创建全局组件方式一1、Vue.extend2、Vue.component方式二直接使用Vue.component方式三三、创建局部组件四、组件中的data ...

99+

2024-04-02
一篇文章让你学透Linux系统中的more命令

Linux系统中有很多实用工具可以让你在终端界面查看文本文件。其中一个就是 more。more 跟我之前另一篇文章里写到的工具 —— less 很相似。它们之间的主要不同点在于 more 只允许你向前查看文件。尽管它能提供的功能看...

99+

2023-06-05
一篇文章教会你用Unity制作网格地图生成组件

目录前言1，创建组建出网格的基本单元2，编辑网格创建脚本3，地图生成案例总结前言如果你玩过三国志这种类型的战旗游戏或者模拟城市、部落冲突、海岛奇兵这种模拟经营类的游戏，那么你对网格...

99+

2024-04-02
一篇文章教你实现VUE多个DIV,button绑定回车事件

目前有个需求是这样的，点击确定按钮或键盘回车时执行操作，很多地方都需要用到。试了几种方法均不行，首先，我在div（button也一样）上绑定@keyup.enter方法，完全...

99+

2024-04-02
一篇文章带你了解C语言文件操作中的几个函数

目录总结fopen：有两个参数，第一个是要被打开或者被创建的文件名，第二个是以什么方式打开。这两个参数要分别用双引号括起来打开文件和关闭文件的基本流程，关闭文件之后要置空 f...

99+

2024-04-02