一文学会Vue中间件管道[每日前端夜话0x8C]

栏目: JavaScript · 发布时间: 5年前

内容简介:作者:Dotun Jolaoso翻译:疯狂的技术宅来源:

每日前端夜话 0x8C

每日前端夜话,陪你聊前端。

每天晚上18:00准时推送。

正文共:2799 字

预计阅读时间:10 分钟

作者:Dotun Jolaoso

翻译:疯狂的技术宅

来源: logrocket

一文学会Vue中间件管道[每日前端夜话0x8C]

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

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

什么是中间件管道?

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

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

开始

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

1vue create vue-middleware-pipeline

安装依赖项

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

1npm i vue-router vuex

Vue-router — 是Vue.js的官方路由器

Vuex — 是 Vue 的状态管理库

创建组件

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

Login — 此组件展示给尚未通过身份验证的用户。

Dashboard — 此组件展示给已登录的用户。

Movies — 我们会向已登录并拥有有效订阅的用户显示此组件。

让我们创建这些组件。切换到 src/components 目录并创建以下文件: Dashboard.vueLogin.vueMovies.vue

使用以下代码编辑 Login.vue 文件:

1<template>
2  <div>
3    <p>This is the Login component</p>
4  </div>
5</template>

使用以下代码编辑 Dashboard.vue 文件:

1<template>
2  <div>
3    <p>This is the Dashboard component for authenticated users</p>
4    <router-view/>
5  </div>
6</template>

最后,将以下代码添加到 Movies.vue 文件中:

1<template>
2  <div>
3    <p>This is the Movies component for authenticated and subscribed users</p>
4  </div>
5</template>

创建store

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

在 src 文件夹中,创建一个 store.js 文件并将以下代码添加到该文件中:

 1import Vue from 'vue'
 2import Vuex from 'vuex'
 3
 4Vue.use(Vuex)
 5
 6export default new Vuex.Store({
 7    state: {
 8        user: {
 9            loggedIn: false,
10            isSubscribed: false
11        }
12    },
13    getters: {
14        auth(state) {
15            return state.user
16        }
17    }
18})

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

定义路由

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

除了通过身份验证的用户之外,每个人都可以访问 /login 。当通过身份验证的用户访问此路由时,应重定向到 dashboard 路由。这条路由应该附有一个 guest 中间件。

只有通过身份验证的用户才能访问 /dashboard 。否则用户在访问此路由时应重定向到 /login 路由。我们把 auth 中间件与此路由相关联。

只有通过身份验并订阅的用户才能访问 /dashboard/movies 。该路由受到 isSubscribedauth 中间件的保护。

创建路由

接下来,在 src 目录中创建一 个 router 文件夹,然后在该文件夹中创建一个 router.js 文件。使用以下代码编辑文件:

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3import store from '../store'
 4
 5import Login from '../components/Login'
 6import Dashboard from '../components/Dashboard'
 7import Movies from '../components/Movies'
 8
 9
10Vue.use(Router)
11
12const router = new Router({
13    mode: 'history',
14    base: process.env.BASE_URL,
15    routes: [
16        {
17            path: '/login',
18            name: 'login',
19            component: Login
20        },
21
22        {
23            path: '/dashboard',
24            name: 'dashboard',
25            component: Dashboard,
26            children: [{
27                path: '/dashboard/movies',
28                name: 'dashboard.movies',
29                component: Movies
30            }
31        ],
32        }
33    ]
34})
35
36
37export default router

在这里,我们创建了一个新的 router 实例,同时传递了几个配置选项以及一个 routes 属性,它接受我们之前定义的所有路由。要注意目前这些路由还都是不受保护的。我们很快就会解决这个问题。

接下来将路由和 store 注入Vue 实例。使用以下代码编辑 src/main.js 文件:

 1import Vue from 'vue'
 2import App from './App.vue'
 3import router from './router/router'
 4import store from './store'
 5
 6Vue.config.productionTip = false
 7
 8
 9new Vue({
10  router,
11  store,
12  render: h => h(App),
13}).$mount('#app')

创建中间件

src/router 目录中创建一个 middleware 文件夹,然后在该文件夹下创建 guest.jsauth.jsIsSubscribed.js 文件。将以下代码添加到 guest.js 文件中:

1export default function guest ({ next, store }){
2    if(store.getters.auth.loggedIn){
3        return next({
4           name: 'dashboard'
5        })
6    }
7
8    return next()
9   }

guest 中间件检查用户是否通过了身份验证。如果通过了身份验证就会被重定向到 dashboard 路径。

接下来,用以下代码编辑 auth.js 文件:

1export default function auth ({ next, store }){
2 if(!store.getters.auth.loggedIn){
3     return next({
4        name: 'login'
5     })
6 }
7
8 return next()
9}

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

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

1export default function isSubscribed ({ next, store }){
2    if(!store.getters.auth.isSubscribed){
3        return next({
4           name: 'dashboard'
5        })
6    }
7
8    return next()
9   }

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

保护路由

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

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3import store from '../store'
 4
 5import Login from '../components/Login'
 6import Dashboard from '../components/Dashboard'
 7import Movies from '../components/Movies'
 8
 9import guest from './middleware/guest'
10import auth from './middleware/auth'
11import isSubscribed from './middleware/isSubscribed'
12
13Vue.use(Router)
14
15const router = new Router({
16    mode: 'history',
17    base: process.env.BASE_URL,
18    routes: [{
19            path: '/login',
20            name: 'login',
21            component: Login,
22            meta: {
23                middleware: [
24                    guest
25                ]
26            }
27        },
28        {
29            path: '/dashboard',
30            name: 'dashboard',
31            component: Dashboard,
32            meta: {
33                middleware: [
34                    auth
35                ]
36            },
37            children: [{
38                path: '/dashboard/movies',
39                name: 'dashboard.movies',
40                component: Movies,
41                meta: {
42                    middleware: [
43                        auth,
44                        isSubscribed
45                    ]
46                }
47            }],
48        }
49    ]
50})
51
52export default router

在这里,我们导入了所有中间件,然后为每个路由定义了一个包含中间件数组的元字段。中间件数组包含我们希望与特定路由关联的所有中间件。

Vue 路由导航守卫

我们使用 Vue Router 提供的导航守卫【 https://router.vuejs.org/guide/advanced/navigation-guards.html#global-before-guards 】来保护路由。这些导航守卫主要通过重定向或取消路由的方式来保护路由。

其中一个守卫是全局守卫,它通常是在触发路线之前调用的钩子。要注册一个全局的前卫,需要在 router 实例上定义一个 beforeEach 方法。

1const router = new Router({ ... })
2router.beforeEach((to, from, next) => {
3 //necessary logic to resolve the hook
4})

beforeEach 方法接收三个参数:

to: 这是我们打算访问的路由。

from: 这是我们目前的路由。

next: 这是调用钩子的 function

运行中间件

使用 beforeEach 钩子可以运行我们的中间件。

 1const router = new Router({ ...})
 2
 3router.beforeEach((to, from, next) => {
 4    if (!to.meta.middleware) {
 5        return next()
 6    }
 7    const middleware = to.meta.middleware
 8
 9    const context = {
10        to,
11        from,
12        next,
13        store
14    }
15    return middleware[0]({
16        ...context
17    })
18})

我们首先检查当前正在处理的路由是否有一个包含 middleware 属性的元字段。如果找到 middleware 属性,就将它分配给 const 变量。接下来定义一个 context 对象,其中包含我们需要传递给每个中间件的所有内容。然后,把中间件数组中的第一个中间件做为函数去调用,同时传入 context 对象。

尝试访问 /dashboard 路由,你应该被重定向到 login 路由。这是因为 /src/store.js 中的 store.state.user.loggedIn 属性被设置为 false 。将 store.state.user.loggedIn 属性改为 true ,就应该能够访问 /dashboard 路由。

现在中间件正在运行,但这并不是我们想要的方式。我们的目标是实现一个管道,可以针对特定路径运行多个中间件。

1return middleware[0]({ …context})

注意上面代码块中的这行代码,我们只调用从 meta 字段中的中间件数组传递的第一个中间件。那么我们怎样确保数组中包含的其他中间件(如果有的话)也被调用呢?这就是管道派上用场的地方。

创建管道

切换到 src/router 目录,然后创建一个 middlewarePipeline.js 文件。将以下代码添加到文件中:

 1function middlewarePipeline (context, middleware, index) {
 2    const nextMiddleware = middleware[index]
 3
 4    if(!nextMiddleware){
 5        return context.next 
 6    }
 7
 8    return () => {
 9        const nextPipeline = middlewarePipeline(
10            context, middleware, index + 1
11        )
12
13        nextMiddleware({ ...context, next: nextPipeline })
14
15    }
16}
17
18export default middlewarePipeline

middlewarePipeline 有三个参数:

context: 这是我们之前创建的 context 对象,它可以传递给栈中的每个中间件。

middleware: 这是在 routemeta 字段上定义的 middleware 数组本身。

index: 这是在 middleware 数组中运行的当前中间件的 index

1const nextMiddleware = middleware[index]
2if(!nextMiddleware){
3return context.next
4}

在这里,我们只是在传递给 middlewarePipeline 函数的 index 中拔出中间件。如果在 index 没有找到 middleware ,则返回默认的 next 回调。

1return () => {
2const nextPipeline = middlewarePipeline(
3context, middleware, index + 1
4)
5nextMiddleware({ ...context, next: nextPipeline })
6}

我们调用 nextMiddleware 来传递 context , 然后传递 nextPipeline const 。值得注意的是, middlewarePipeline 函数是一个递归函数,它将调用自身来获取下一个在堆栈中运行的中间件,同时将 index 增加为1。

把它们放在一起

让我们使用 middlewarePipeline 。像下面这段代码一样编辑 src/router/router.js 文件:

 1import Vue from 'vue'
 2import Router from 'vue-router'
 3import store from '../store'
 4
 5import Login from '../components/Login'
 6import Dashboard from '../components/Dashboard'
 7import Movies from '../components/Movies'
 8
 9import guest from './middleware/guest'
10import auth from './middleware/auth'
11import isSubscribed from './middleware/isSubscribed'
12import middlewarePipeline from './middlewarePipeline'
13
14Vue.use(Router)
15
16const router = new Router({
17    mode: 'history',
18    base: process.env.BASE_URL,
19    routes: [{
20            path: '/login',
21            name: 'login',
22            component: Login,
23            meta: {
24                middleware: [
25                    guest
26                ]
27            }
28        },
29        {
30            path: '/dashboard',
31            name: 'dashboard',
32            component: Dashboard,
33            meta: {
34                middleware: [
35                    auth
36                ]
37            },
38            children: [{
39                path: '/dashboard/movies',
40                name: 'dashboard.movies',
41                component: Movies,
42                meta: {
43                    middleware: [
44                        auth,
45                        isSubscribed
46                    ]
47                }
48            }],
49        }
50    ]
51})
52
53router.beforeEach((to, from, next) => {
54    if (!to.meta.middleware) {
55        return next()
56    }
57    const middleware = to.meta.middleware
58    const context = {
59        to,
60        from,
61        next,
62        store
63    }
64
65    return middleware[0]({
66        ...context,
67        next: middlewarePipeline(context, middleware, 1)
68    })
69})
70
71export default router

在这里,我们使用 <code> middlewarePipeline <code> 来运行栈中包含的后续中间件。

1return middleware[0]({
2...context,
3next: middlewarePipeline(context, middleware, 1)
4})

在调用第一个中间件之后,使用 middlewarePipeline 函数,还会调用栈中包含的后续中间件,直到不再有中间件可用。

如果你访问 /dashboard/movies 路由,应该被重定向到 /dashboard 。这是因为 user 当前是 authenticated 但没有有效订阅。如果将 store 中的 store.state.user.isSubscribed 属性设置为 true ,就应该可以访问 /dashboard/movies 路由了。

结论

中间件是保护应用中不同路由的好方法。这是一个非常简单的实现,可以使用多个中间件来保护 Vue 应用中的单个路由。你可以在(https://github.com/Dotunj/vue-middleware-pipelines)找到所有的源码。

原文: https://blog.logrocket.com/vue-middleware-pipelines/

下面夹杂一些私货:也许你和高薪之间只差这一张图

2019年京程一灯课程体系上新,这是我们第一次将全部课程列表对外开放。

愿你有个好前程,愿你月薪30K。我们是认真的 ! 一文学会Vue中间件管道[每日前端夜话0x8C]

一文学会Vue中间件管道[每日前端夜话0x8C]

在公众号内回复“体系”查看高清大图

长按二维码,加大鹏老师微信好友

拉你加入前端技术交流群

唠一唠怎样才能拿高薪

一文学会Vue中间件管道[每日前端夜话0x8C]

小手一抖,资料全有。长按二维码关注 前端先锋 ,阅读更多技术文章和业界动态。

一文学会Vue中间件管道[每日前端夜话0x8C]


以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持 码农网

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

MongoDB

MongoDB

Kristina Chodorow / O'Reilly Media / 2013-5-23 / USD 39.99

How does MongoDB help you manage a huMONGOus amount of data collected through your web application? With this authoritative introduction, you'll learn the many advantages of using document-oriented da......一起来看看 《MongoDB》 这本书的介绍吧!

JS 压缩/解压工具
JS 压缩/解压工具

在线压缩/解压 JS 代码

在线进制转换器
在线进制转换器

各进制数互转换器

MD5 加密
MD5 加密

MD5 加密工具