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

如果可以的话，SEO重定向服务器端是个好主意（不是像提到的问题那样用于登录）。

但是对于诸如用户语言之类的事情，使用这样的服务器端重定向可能是个好主意。

export const getServerSideProps = async ({ req, res }) => {
if (res) {
    res.writeHead(302, { // or 301
      Location: "localized/url/product/categories",
    });
    res.end();
  }
}

更新，我最终遇到了这个问题，因为我确实已经对标头发送了一些问题。请让我知道如何解决此问题，因为它不是最理想的方法（尽管Google根据https://www.seroundtable.com/google-meta-refresh-redirects-work-25335.html的条款确实了解此问题）

export default function HomePage({ language }) {
  return (
    <Head>
      <title>-</title>
      <meta httpEquiv="refresh" content={`0;url=/${language}/discover/0`} />
    </Head>
  );
}

更新 Nextjs正在添加本机支持，并且提供了RFC：https://github.com/vercel/next.js/discussions/17078

Answer 2

使用Next.JS，您需要在客户端上重定向客户端。如果登录成功，请尝试返回200状态代码，然后成功使用客户端路由器导航到另一个页面。此示例应该使您了解如何以编程方式将新页面推送到路由器历史记录：

import Router from 'next/router'

() => {
  if(code==200){
    Router.push('/')
  }
}

Answer 3

现在可以在Next.js 10+上实现，而无需直接进行任何类型的响应标头操作。如果满足条件，请使用getServerSideProps并返回一个redirect键作为唯一值：

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

请注意，使用Router的{{3}}不会执行服务器端重定向！

在NextJS中从服务器端重定向

3 个答案: