vuejs2 - Nuxt 中间件调用两次

Question

我有一个 Nuxt SSR 应用程序。页面上有一个中间件应该检查​​查询字符串中的令牌，它不存在然后重定向到带有令牌的新 url。似乎这个中间件在同一个 url 下被调用了两次，但令牌检查的结果不同。我不明白为什么它被调用两次并且相同条件的结果不同。

/** Create DB item and return token */
async middleware(context) {
    const token = context.route.query.token;
    console.log('token');
    console.log(token);  // First one is ok but the second is undefined.
    if (!token) {
        const result = await context.$api.campaigns.createNewShare();
        context.redirect({'name': 'campaigns-new', 'query': {token: result.data.token}});
    }
},

这是请求流的屏幕截图：

标签： vuejs2nuxt.jsmiddleware

Answer 1

基本上因为您使用的是 SSR，该中间件将从服务器调用一次，从客户端调用一次，因此您可以看到重复的日志。

您可以通过使用阻止中间件在服务器上运行，if (process.client)或者通过使用阻止中间件在客户端运行if (process.server)。

例子：

/** Create DB item and return token */
async middleware(context) {
    if (process.client) {       // or !process.server if you prefer
        const token = context.route.query.token;
        console.log('token');
        console.log(token);  // First one is ok but the second is undefined.
        if (!token) {
            const result = await context.$api.campaigns.createNewShare();
            context.redirect({'name': 'campaigns-new', 'query': {token: result.data.token}});
        }
    }
}