尝试实现一种更简洁的方法,将中间件分离为 vue-router 内部的单个模块,即 beforeEach 导航守卫。找到了一个对我有用的教程,但这仅在添加单个文件时才有效,但由于我有几个全局中间件(请参阅 globalMiddleware
),它们总是需要加载代码停止工作。
我使用的是最新版本的 vue 和 vue-router。
文件夹结构
router/
- index.js
- routes.js
middleware/
- guest
- auth
- locale
- check
- ....
路由器/index.js
import Modules from '../middleware/index.js'//load all middleware
const middlewareModules = Modules;
// The middleware for every page of the application.
const globalMiddleware = ['locale', 'check']
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 })
}
}
router.beforeEach(async (to, from, next) => {
const middleware = to.meta.auth.middleware;
if (!middleware && !middlewareModules[middleware]) {
return next()
}
const context = {
to,
from,
next,
store
}
return middlewareModules[middleware].default({
...context,
next: middlewarePipeline(context, middlewareModules[middleware], 1)
})
})
中间件/guest.js
export default function guest({ next, store }) {
if(store.state.auth.authenticated){
return next({name:"dashboard"})
}
return next();
}