Vue 路由器导航守卫添加中间件模块不起作用

时间:2021-06-17 14:25:44

标签: vue.js vue-router

尝试实现一种更简洁的方法,将中间件分离为 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();
}

0 个答案:

没有答案
相关问题