Next.js 应用程序中使用 JWT 的最佳实践-JavaScript中文网-JavaScript教程资源分享门户

随着 Web 开发的发展，前后端分离架构逐渐流行，在这种架构下，JSON Web Token（JWT）被广泛用于身份验证。Next.js 作为一款流行的 React 框架，也提供了使用 JWT 进行身份验证的能力。本文将介绍 Next.js 应用程序中使用 JWT 的最佳实践，包括如何实现 JWT 鉴权、如何保护路由和如何处理鉴权失败等问题。

JWT 鉴权

JWT 是一种基于 JSON 的开放标准，用于在各方之间安全地传输信息，通常用于定义双方之间的声明。JWT 通常由三部分组成，分别是头部、载荷和签名，它们用点号（.）分隔开来，形成一个完整的 JWT。

在 Next.js 应用程序中，我们可以使用第三方库（例如 jsonwebtoken 和 cookie）来实现 JWT 鉴权。下面是一个简单的 JWT 鉴权流程：

用户输入用户名和密码，将其发送至服务器端进行验证。
服务器端对输入的用户名和密码进行校验，如果校验通过，那么就生成一个对应的 JWT，并将其返回给客户端。
客户端将 JWT 存储在本地的 Cookie 中，并在以后的请求中将其携带上。
服务器端在接受到请求后，通过验证 JWT 的签名和过期时间等信息，来验证该请求的合法性。

在实际应用中，可以将 JWT 的生成和验证逻辑封装在单独的服务中，以提高应用程序的整体安全性。

保护路由

在 Next.js 中，我们可以使用 getServerSideProps 和 getStaticProps 来实现对路由的鉴权。这两个方法都可以在服务器端获取数据，并将其作为 props 传递给组件。

我们可以在 getServerSideProps 和 getStaticProps 中检查用户的 JWT 是否有效，如果无效，则可以将其重定向至登录页。

下面是一个检查 JWT 是否有效的示例代码：

// javascriptcn.com 代码示例
export async function getServerSideProps(ctx) {
  const { req, res } = ctx;
  const { token } = parseCookies(req);

  if (!token) {
    res.writeHead(302, { Location: "/login" });
    res.end();
    return { props: {} };
  }

  try {
    const user = verify(token, process.env.NEXT_PUBLIC_TOKEN_SECRET);
    // do something with user data
  } catch (err) {
    res.writeHead(302, { Location: "/login" });
    res.end();
    return { props: {} };
  }
}

处理鉴权失败

在应用程序中，当用户的 JWT Token 无效时，我们需要向用户显示一个友好的错误信息，并提供重新登录的选项。

我们可以使用 useEffect 钩子函数来检测 JWT Token 是否有效，如果无效，则显示一个警告信息。下面是一个处理鉴权失败的示例代码：

// javascriptcn.com 代码示例
import Cookie from "js-cookie";
import jwt from "jsonwebtoken";
import { useState, useEffect } from "react";

function ProfilePage() {
  const [user, setUser] = useState({});
  const [error, setError] = useState("");

  useEffect(() => {
    const token = Cookie.get("token");

    if (!token) {
      setError("请先登录");
      return;
    }

    try {
      const decoded = jwt.verify(token, process.env.NEXT_PUBLIC_TOKEN_SECRET);
      setUser(decoded.username);
    } catch (err) {
      setError("JWT Token 无效，请重新登录");
      Cookie.remove("token");
    }
  }, []);

  if (error) {
    return (
      <div>
        <h1>{error}</h1>
        <button onClick={() => window.location.href = "/login"}>重新登录</button>
      </div>
    );
  }

  return (
    <div>
      <h1>欢迎 {user}，您的账号已登录</h1>
    </div>
  );
}

总结

在 Next.js 应用程序中使用 JWT 来进行身份验证是一种非常常见的模式。在实际应用中，我们需要注意保障 JWT 的安全性、检查用户的登录状态，并提供友好的错误提示，以提高应用程序的整体用户体验。希望本文能对读者理解和应用 JWT 有所帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/652e901b7d4982a6ebf9844a