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 http://localhost:3000/api/data)，我就能成功重定向到我的/login页面。但是当我在React组件中使用Axios进行请求时，它却不起作用。

有任何想法如何解决这个问题吗？

- Jules Grenier

---

Axios不会自动跟随API返回的重定向。您需要检查收到的响应，并根据返回的内容在客户端上进行重定向。 - juliomalves

简单来说，AJAX只会传递从服务器返回的信息。您需要手动处理如何处理该信息。 - yqlim

Answer 1

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

- Jules Grenier

---

嗨@Jules，你能否伪代码说明一下你所说的根据响应手动重定向的意思？我也遇到了同样的问题；我已经进行了身份验证并且它已经命中了我的回调API路由，我已经得到了我想要的详细信息，但现在不确定如何重定向到一个页面。 - gorlaz

你解决了吗？我也遇到同样的问题。Quickbooks在安装应用程序后会将用户发送回我的回调API，然后我将数据保存到数据库中。完成后，我想将用户重定向回应用程序。 - Shannon Cole

其实算了，这个对我有用：res.status(200).redirect(307, "/"); - Shannon Cole

你好 @ShannonCole！很抱歉回复晚了，我之前不太活跃。很高兴你的解决方案对你有用 :) 至于我自己，如果我没记错的话，在前端中，如果请求（来自 Next 而非外部 API）以状态码 401（未授权）结束，我需要将用户重定向到登录页面。 - Jules Grenier

没问题！谢谢。我在API中使用了重定向和在前端使用了router.push。 - Shannon Cole

@ShannonCole 你不需要使用.status(200)。 - williamli

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;

- williamli

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所说的那样，答案是正确的，但需要提供一个例子。

- Devam Sanghvi

---

你没有从API路由重定向并跟随重定向URL。那只是发送一个常规的200。 - juliomalves

Answer 4

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

<fetch>无法使用重定向。

- hjaber

---

链接可能会过期，请编辑帖子并添加GitHub帖子的精简版本。 - Jasper Lankhorst

虽然这个链接可能回答了问题，但最好在此处包含答案的基本部分并提供参考链接。如果链接页面更改，仅有链接的答案可能会失效。-【来自审查】 - ahuemmer