Nuxt 中间件调用两次

Posted 2023-02-16

【中文标题】Nuxt 中间件调用两次

【英文标题】：Nuxt middleware call two times

【发布时间】：2021-12-07 14:57:12

【问题描述】：

我有一个 Nuxt s-s-r 应用程序。页面上有一个中间件应该检查​​查询字符串中的令牌，它不存在然后重定向到带有令牌的新 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);
    
,

这是请求流程的截图：

【参考方案1】：

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

您可以使用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);
        
    

【讨论】：

如果我添加了 process.client 条件，它根本不会被调用。

可能是它已经只在服务器端运行并且中间件被调用了两次，因为加载的第一个页面没有令牌，然后重定向到另一个/相同路由（会再次触发中间件）？