Next.js 从 API 路由重定向

Question

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

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

问题是，如果用户的会话无效，我不希望用户能够执行对 API B 的调用。因此，我在 Next 中添加了一些 API 端点（在

pages/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

/login

），我会成功重定向到我的

http://localhost:3000/api/data

页面。当我在 React 组件中使用 Axios 发出请求时，它不起作用。

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

Answer 1

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

Answer 2

您不需要

.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 3

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

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 4

API 请求必须由

<form>

发起。

重定向不适用于

<fetch>

Answer 5

您可以使用

NextResponse.redirect

轻松实现这一点，请参阅下面的示例。

return NextResponse.redirect(process.env.NEXT_PUBLIC_APP_URL + "/login", { status: 307 });