介绍

Welcome to Nextra! This is a basic docs template. You can use it as a starting point for your own project :)

What is Nextra?

A simple, powerful and flexible site generation framework with everything you love from Next.js.

文档

The documentation is available at https://nextra.site (opens in a new tab).

运行

当使用Next.js时，可以通过内置的getServerSideProps函数来从服务器获取props。因此，可以在服务器端实现登录逻辑，并将用户信息传递给客户端组件。

以下是一个简单的登录组件示例：

import { useState } from 'react'
import { useRouter } from 'next/router'
 
export default function Login() {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const [errorMessage, setErrorMessage] = useState('')
 
  const router = useRouter()
 
  const handleSubmit = async (event) => {
    event.preventDefault()
    const response = await fetch('/api/login', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ email, password })
    })
    if (response.ok) {
      router.push('/')
    } else {
      const data = await response.json()
      setErrorMessage(data.message)
    }
  }
 
  return (
    <form onSubmit={handleSubmit}>
      <label>
        Email
        <input type="email" value={email} onChange={event => setEmail(event.target.value)} />
      </label>
      <label>
        Password
        <input type="password" value={password} onChange={event => setPassword(event.target.value)} />
      </label>
      { errorMessage && <div style={{ color: 'red' }}>{errorMessage}</div> }
      <button type="submit">Login</button>
    </form>
  )
}

在这个组件中，我们使用useState hook来跟踪用户输入的电子邮件和密码。当表单被提交时，我们通过fetch函数向/api/login发送POST请求。服务器将验证用户凭据并返回一个JWT令牌，以便在客户端中进行身份验证。

接下来，我们使用useRouter hook来导航到主页（如果登录成功）或在错误消息字段中显示错误消息（如果登录失败）。

最后，请确保创建一个名为/api/login的API路由，并使用以下代码在服务器上实现登录逻辑：

export default async function login(req, res) {
  const { email, password } = req.body
 
  // 在此处实现身份验证逻辑...
  if (email === 'user@example.com' && password === 'password') {
    const token = generateToken({ email })
    res.status(200).json({ token })
  } else {
    res.status(401).json({ message: 'Invalid email or password' })
  }
}

在这里，我们简单地检查提供的电子邮件和密码是否匹配，并向成功的用户发放JWT令牌。如果凭据无效，则返回401状态码及其原因。

记得要安装jsonwebtoken库以生成JWT令牌：

npm install jsonwebtoken

请注意，由于我们在服务端处理登录逻辑并使用JWT对客户端进行身份验证，因此可以避免XSS攻击。

案例