如何在不修改路由的情况下重新执行Nuxt.js middleware校验逻辑

解决方案 #

方案1：在认证状态变更的VueX action中直接复用校验逻辑 #

你已经把核心校验逻辑抽离到reevaluateAuthStatus方法里了，完全可以在登录/登出触发的action里直接调用它，只需要补齐缺失的redirect和route参数即可：

• route参数可以直接从Vue实例的$router.currentRoute拿到，也可以在调用action的时候把当前路由作为参数传入，Nuxt项目还可以直接从app.context.route获取
• redirect参数本质就是路由跳转行为，你可以直接封装成调用$router.push/$router.replace的函数，和middleware里的redirect行为完全一致

示例代码（Vue3 + VueRouter4环境）：

// store/auth.js
import { reevaluateAuthStatus } from '../mixins/auth'

const actions = {
  // 登录成功后触发的action
  async login({ commit }, loginForm) {
    // 原有登录请求、状态写入逻辑
    const user = await api.login(loginForm)
    commit('setUser', user)
    // 登录完成后直接调用校验逻辑
    const redirect = (path) => this.$router.replace(path)
    const currentRoute = this.$router.currentRoute.value
    reevaluateAuthStatus(this, redirect, currentRoute)
  },
  // 登出触发的action
  async logout({ commit }) {
    // 原有登出、状态清空逻辑
    await api.logout()
    commit('clearUser')
    const redirect = (path) => this.$router.replace(path)
    const currentRoute = this.$router.currentRoute.value
    reevaluateAuthStatus(this, redirect, currentRoute)
  }
}

方案2：全局监听认证状态变化（适合多入口修改登录状态的场景） #

如果你的登录状态可能在多个地方被修改，不想每个修改入口都加调用逻辑，可以直接在全局（比如根组件的mounted钩子、Nuxt项目的plugin里）加一个监听用户状态的watcher，状态变化时自动触发校验：

// 根组件App.vue
import { reevaluateAuthStatus } from '../mixins/auth'

export default {
  mounted() {
    // 监听用户状态变化
    this.$store.watch(
      (state) => state.auth.user,
      () => {
        const redirect = (path) => this.$router.replace(path)
        const currentRoute = this.$router.currentRoute.value
        reevaluateAuthStatus(this.$store, redirect, currentRoute)
      },
      { immediate: true } // 项目初始化的时候也执行一次校验
    )
  }
}

适配说明 #

• 如果你使用的是Vue2环境，$router.currentRoute本身就是响应式对象，不需要加.value
• 如果你使用的是Nuxt2，可以直接用app.context.redirect作为参数传入，和middleware默认的redirect行为完全一致

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