vue路由中间件

背景

在访问vue系统时，经常需要在进入路由前做一些全局处理或者登录状态校验，如果全部写在beforeEach函数中，内容会特别多，难以维护。需要将beforeEach中的内容拆分成多个中间件方法，按顺序执行。

步骤

1、注册中间件

注册需要的中间件文件，以修改页面标题和登录校验为例

router / middlewares / changeTitle.ts

export default async ({ to, next }: any) => {
  if (to.meta?.title) {
    // 修改页面title
    document.title = to.meta.title
  }
  next()
}

router / middlewares / auth.ts

export default async ({ to, next }: any) => {
  // 需要登录才能访问的页面path
  const needLoginPath = ['/about', '/orders', '/my-account']
  if (needLoginPath.includes(to.path) && !localStorage.getItem('token')) {
    // 访问需要登录的页面，并且没有登录状态，跳转登录页
    next('/login')
  } else {
    next()
  }
}

2、新建路由中间件执行文件

router / middlewarePipeLine.ts

function middlewarePipeline(context: any, middleware: any, index: any) {
  // 下一个中间件
  const nextMiddleware = middleware[index]
  // 如果中间件全部执行完毕，return next
  if (!nextMiddleware) {
    return context.originalNext
  }
  return () => {
    const nextPipeline = middlewarePipeline(context, middleware, index + 1)
    // 执行下一个中间件，并且重新赋值next
    nextMiddleware({ ...context, next: nextPipeline })
  }
}
export default middlewarePipeline

3、在路由配置文件router / index.ts添加中间件

import { createRouter, createWebHistory } from 'vue-router'

import changeTitle from './middlewares/changeTitle'
import auth from './middlewares/auth'
import middlewarePipeline from './middlewarePipeLine'

// 路由中间件，按数组顺序执行
const middlewares = [changeTitle, auth]

const router = createRouter({
  // ... 路由配置
})

router.beforeEach((to, from, next) => {
  // 创建上下文
  const context = { to, from, next, router, originalNext: next }
  // 将上下文信息传递进入到中间件里面去执行，刚开始先执行第一个中间件
  return middlewares[0]({
    ...context,
    next: middlewarePipeline(context, middlewares, 1)
  })
})

export default router