reactjs - 在 NextJS 中从服务器端重定向

Question

我正在开发一个 Next.JS 应用程序，用户应该在其中登录以查看内容。如果用户名和密码正确，我想将用户重定向到“/”。但是我的实现似乎不起作用。

我在 SO 上搜索了关于此的问题，但他们都在谈论重定向 getInitialProps但这对我没有帮助，因为我想从我的自定义快速服务器重定向用户。

Login.js

 async handleSubmit(event) {
  event.preventDefault()
  const { username, password } = this.state

  try {
    const response = await fetch('/log_in', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ username, password })
    })
  }

 catch (error) {
    console.log(error)
  }
}  

server.js

app.post('/log_in', (req,res) => {
    console.log(`login form data`);
    console.log(`Username : ${req.body.username}`);
    console.log(`password : ${req.body.password}`);
    if(req.body.username == "user" && req.body.password == "123"){
        res.redirect('/')
    }
}) 

Answer 1

这现在可以在 Next.js 10+ 上实现，而无需直接进行任何类型的响应 header 操作。使用 getServerSideProps 或 getStaticProps 并返回 redirect如果满足您的条件， key 作为它的唯一值:

export async function getServerSideProps(context) {
  if(req.body.username == "user" && req.body.password == "123"){
    return {
      redirect: {
        permanent: false,
        destination: "/"
      }
    }
  }
}