Vue登录后路由跳转失效停留在登录页问题排查求助

问题根因 #

核心问题是Vuex的signIn action没有等待auth异步逻辑执行完成就提前返回，导致路由跳转时登录状态还未完全初始化：

• 现有signIn代码中调用dispatch('auth')时没有加await，signIn的Promise会在登录接口请求完成后直接resolve，不会等待auth内部拉取用户信息、提交用户状态到Store的异步逻辑执行完毕
• 此时触发$router.push('/')，首页的beforeEnter导航守卫判断isAuth时，state.user还处于空值状态，会直接拦截请求重定向回登录页，视觉上就表现为登录后没有跳转
• 跳转回登录页后，auth的异步逻辑才执行完成，将token和用户信息提交到Store，因此第二次点击登录按钮时，登录状态已经就绪，可以正常跳转

修复方案 #

1. 修改Vuex的signIn action，给dispatch加上await，确保登录状态完全初始化后再返回：

async signIn({dispatch},data) {
    const res = await axios.post("auth", data);
    // 新增await，等待auth逻辑执行完毕再resolve
    await dispatch('auth', res.data.token)
},

2. 可同步优化auth action的冗余代码，删除重复的token提交逻辑：

async auth({commit, state}, token) {
    if(token) {
        commit('token', token)
    }

    if(!state.token) {
        return
    }

    // 删除重复的 commit('token', token) 代码
    
    try {
        const res = await axios.get('auth')
        commit('user', res.data)
    } catch (e) {
        commit('user', null)
        commit('token', null)
    }
},

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