Vue2+Express项目JWT路由鉴权页面跳转异常问题排查

核心错误原因 #

你的authenticateRole函数没有返回axios请求的Promise对象。axios的post方法本身会返回Promise，但你在函数里只调用了server.post却没有return，导致调用authenticateRole(token).then()时拿到的是undefined，自然无法调用then方法，这就是控制台报错的直接原因。

修复api.js #

修改authenticateRole函数，添加return：

export const authenticateRole = (jwt) => {
    // 添加return，返回axios请求的Promise
    return server.post("/authenticate",{
        token: jwt
    })
}

路由守卫逻辑优化（避免循环跳转与逻辑漏洞） #

除了核心错误，你的路由守卫还有两个需要修正的问题：

1. 跳转登录页应该用next()方法，而非直接调用router.push，否则会重复触发路由守卫，可能导致无限循环。
2. 所有分支都必须调用next()或next({path})，否则路由会一直处于等待状态，页面无法跳转。

修复后的main.js路由守卫代码 #

router.beforeEach((to, from, next) => {
    if (to.matched.some(res => res.meta.requireAuth)) {
        let isLogin = getStore("isLogin");
        let token = getStore("token");
        store.dispatch('setStatus');
        
        if(!token) {
            // 无token，跳转到登录页，用next而非router.push
            return next({name:"login"});
        }else {
            authenticateRole(token).then(response => {
                // axios返回的响应数据在response.data中，需提取后使用
                const data = response.data;
                console.log(data)
                if(data.code === 0) {
                    if(to.name === "login"){
                        return next();
                    }
                    // 权限判断：未登录 或 角色不在允许范围内，跳登录
                    if (!isLogin || !["boss", "admin"].includes(data.role)) {
                        return next({name: "login"});
                    }
                    // admin页面仅允许boss访问
                    if(to.name === "admin" && data.role !== "boss" ){
                        return next({name: "login"});
                    }
                    // 权限校验通过，放行
                    next();
                } else {
                    // token验证失败，跳登录
                    return next({name: "login"});
                }
            }).catch(err => {
                // 捕获网络请求异常，避免路由卡住
                console.error("token验证请求失败", err);
                return next({name: "login"});
            })
        }
    } else {
        // 无需鉴权的页面直接放行
        next();
    }
});

补充说明 #

• 注意axios的响应结构：后端返回的业务数据是在response.data中，之前直接拿data会导致数据读取错误。
• 添加catch捕获请求异常，避免网络错误导致路由一直处于等待状态。

内容的提问来源于stack exchange，提问作者Martin Xie