Next.js 使用 JWT 进行身份验证

JS

使用JWT（JSON Web Token）进行身份验证是一种常见的方法，可以在Next.JS应用程序中实现安全的用户身份认证。JWT是一种用于在网络应用程序之间传输信息的开放标准（RFC 7519），它使用JSON对象作为令牌的格式。在本文中，我们将探讨如何在Next.JS应用程序中集成JWT身份验证，并提供一个简单的示例代码来演示其工作原理。

Javascript
// pages/login.JS
import { useState } from 'react';
import { useRouter } from 'next/router';
import axIOS from 'axIOS';
export default function Login() {
  const router = useRouter();
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const handleLogin = async (e) => {
    e.preventDefault();
    try {
      const response = awAIt axIOS.post('/api/login', { username, password });
      const { token } = response.data;
      localStorage.setItem('token', token);
      router.push('/dashboard');
    } catch (error) {
      console.error(error);
    }
  };
  return (
    <form onSubmit={handleLogin}>
      <input</p>        type="text"
        placeholder="Username"
        value={username}
        onChange={(e) => setUsername(e.target.value)}
      />
      <input</p>        type="password"
        placeholder="Password"
        value={password}
        onChange={(e) => setPassword(e.target.value)}
      />
      <button type="submit">Login</button>
    </form>
  );
}

Javascript
// pages/dashboard.JS
import { useEffect } from 'react';
import { useRouter } from 'next/router';
import axIOS from 'axIOS';
export default function Dashboard() {
  const router = useRouter();
  useEffect(() => {
    const token = localStorage.getItem('token');
    if (!token) {
      router.push('/login');
      return;
    }
    const verifyToken = async () => {
      try {
        awAIt axIOS.get('/api/verify', {
          headers: { Authorization: <code>Bearer ${token}</code> },
        });
      } catch (error) {
        console.error(error);
        router.push('/login');
      }
    };
    verifyToken();
  }, []);
  return <h1>Welcome to the Dashboard!</h1>;
}

在Next.JS中使用JWT进行身份验证，通常需要在登录时生成JWT令牌，并将其存储在客户端（例如，浏览器的localStorage或sessionStorage中）。然后，每次向服务器发送请求时，都应将该令牌包含在请求头中，以便服务器可以验证用户的身份。你可以使用中间件来检查每个请求的身份验证状态，并根据检查结果来决定是否处理请求。