Nuxt SSR应用页面middleware触发两次 token两次校验结果不一致问题咨询

问题诱因 #

这个是Nuxt SSR模式下的经典常见问题，主要由两个原因导致：

• Nuxt SSR默认的双端执行机制：页面级/全局middleware会在首屏请求时执行两次，第一次是服务端接收到请求时执行，第二次是客户端页面hydrate激活阶段执行，你打印的两次日志分别对应两个端的执行结果。
• 客户端执行时query读取异常：第二次拿到undefined是客户端执行阶段的结果，通常是两个原因导致：
  1. 所用的Nuxt2版本存在已知bug，客户端hydrate阶段middleware执行时机早于路由实例初始化完成，导致context.route.query无法正确读取地址栏的查询参数
  2. 你的重定向目标路由和当前middleware所属的路由为同一个路由，且调用context.redirect后没有显式终止逻辑，触发了客户端的二次无参数路由跳转

修复方案 #

可以根据你的业务需求选择对应方案：

1. 仅在服务端执行该middleware（推荐，token校验生成逻辑属于服务端逻辑，不需要客户端重复执行）：

async middleware(context) {
    // 客户端直接跳过执行
    if (process.client) return
    const token = context.route.query.token;
    console.log('token', token);
    if (!token) {
        const result = await context.$api.campaigns.createNewShare();
        context.redirect({'name': 'campaigns-new', 'query': {token: result.data.token}});
        return
    }
}

2. 如果需要保留客户端执行逻辑，调用redirect后显式return终止后续逻辑，同时可以兼容用原生API读取地址栏参数兜底：

async middleware(context) {
    let token = context.route.query.token
    // 客户端兜底读取地址栏参数
    if (process.client && !token) {
        const searchParams = new URLSearchParams(window.location.search)
        token = searchParams.get('token')
    }
    console.log('token', token);
    if (!token) {
        const result = await context.$api.campaigns.createNewShare();
        context.redirect({'name': 'campaigns-new', 'query': {token: result.data.token}});
        // 重定向后终止逻辑
        return
    }
}

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