通常，在构建spa时，需要保护某些路由。例如假设有一个只允许经过身份验证的用户访问的 dashboard 路由，我们可以通过使用 auth 中间件来确保合法用户才能访问它。
在本教程中，我们将学到怎样用 vue-router 为vue应用程序实现中间件管道。
什么是中间件管道？
中间件管道（middleware pipeline）是一堆彼此并行运行的不同的中间件。
继续前面的案例，假设在 /dashboard/movies 上有另一个路由，我们只希望订阅用户可以访问。我们已经知道要访问 dashboard 路由，你需要进行身份验证。那么应该怎样保护 /dashboard/movies 路由以确保只有经过身份验证和订阅的用户才能访问呢？通过使用中间件管道，可以将多个中间件链接在一起并确保它们能够并行运行。
开始
首先用 vue cli 快速构建一个新的 vue 项目。
vue create vue-middleware-pipeline安装依赖项
创建并安装项目目录后，切换到新创建的目录并从终端运行以下命令：
npm i vue-router vuexvue-router — 是vue.js的官方路由器
vuex — 是 vue 的状态管理库
创建组件
我们的程序将包含三个组件。
login?—?此组件展示给尚未通过身份验证的用户。
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 = falsenew 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 检查用户当前是