Next.js 从 API 路由重定向

Question

我正在构建一个需要用户登录的后台应用程序。我有 2 个外部 API：

• API A：管理用户帐户和会话
• API B：对另一个数据库执行 CRUD 操作（与用户数据库无关）

问题是我不希望用户在他们的会话无效时能够执行对 API B 的调用。 因此，我在下一步（在pages/api下）添加了一些 API 端点，它们执行以下操作：

1. 针对 API A 验证会话的有效性
2. 如果会话有效：继续执行步骤 3，如果无效：重定向到页面/login
3. 调用 API B

如果会话有效，一切正常，但如果会话无效，则一切都会失败。

我试过了

res.redirect(307, '/login').end()

和

res.writeHead(307, { Location: '/login' }).end()

但它没有用。 即使指定整个路径 ( http://localhost:3000/login )，它也会失败。 我不明白的是，如果我直接从浏览器发出请求 (GET http://localhost:3000/api/data )，我会成功重定向到我的/login页面。 当我在 React 组件中使用 Axios 发出请求时，它不起作用。

知道我该如何解决这个问题吗？

Answer 1

正如@juliomalves 和@yqlim 所解释的那样，我必须根据 API 的响应手动进行重定向。

Answer 2

使用以下代码解决相同的问题：

api

res.status(200).json({ success: "success" }) //add at last of the api to give response

页

import Router from 'next/router'
    
let res = await fetch('api', {
        method: 'POST', // or 'PUT'
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(data),
    })
if (res.status == 200) {
   Router.push('/location')
}

正如@Jules Grenier 所说，答案是正确的，但提供了一个例子

Answer 3

你不需要.end() 。 您是否尝试过res.redirect(307, '/login') ？

在 Next.js v12 和 v13 中，以下内容适用于我。

// /api/example.js

const handler = async function (req, res) {
  // custom logic
  if (failed)
    return res.redirect(307, '/login')
}

export default handler;

Answer 4

API 请求必须由<form>发起。

重定向不适用于<fetch>

https://github.com/vercel/next.js/discussions/34991