Next.js从API路由重定向

Question

我正在构建一个后台应用程序，需要用户登录。我有2个外部api:

• API A:管理用户帐户和会话
• API B:在另一个数据库(与用户数据库无关)上执行CRUD操作

问题是我不希望用户能够在会话无效的情况下执行对API B的调用。因此，我在Next(在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)也失败。我不明白的是，如果我直接从浏览器发出请求(GEThttp://localhost:3000/api/data)，我成功地重定向到我的/login页面。当我在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>