Next.js 中使用 JWT 进行身份认证的详细教程

在现代的 Web 应用程序中，身份验证是非常重要的。在本文中，我们将介绍如何在 Next.js 应用程序中使用 JWT 进行身份验证和身份认证。JWT（JSON Web Tokens）是一种安全的身份验证标准，它可以让您在不使用 Cookie 的情况下进行身份验证。

什么是 JWT？

JWT 是一种安全的身份验证标准，用于在网络之间传输信息。它是由三部分组成的 JSON 对象，分别是 Header、Payload 和 Signature。Header 包含了算法和 token 类型，Payload 包含了信息和指令，Signature 是根据 Header、Payload 和密钥生成的哈希。

JWT 通常被用来在 Web 应用程序中进行身份验证，并且可以在不依赖 Cookie 的情况下实现。

在 Next.js 中使用 JWT

在 Next.js 中使用 JWT 进行身份验证非常简单。我们只需要在我们的服务端文件中编写一个中间件函数并将其应用到需要身份验证的页面上即可。

创建 JWT

在开始使用 JWT 进行身份验证之前，我们需要创建一个 JWT。下面是一个简单的示例代码：

import jwt from 'jsonwebtoken';

const secret = 'mysecretkey';

export const createToken = (payload) => {
  return jwt.sign(payload, secret, {
    expiresIn: '1d',
  });
};

这里我们使用了 jsonwebtoken 库来创建 JWT。我们传递了一个 payload 参数，它存储了我们需要传递的用户信息。我们还传递了一个 secret 参数，它是在生成 JWT 时使用的密钥。最后，我们使用 expiresIn 参数来指定令牌的有效期限。

鉴定 JWT

现在我们已经创建了一个 JWT，我们需要编写一个函数来验证 JWT 的真实性。下面是一个简单的示例代码：

import jwt from 'jsonwebtoken';

const secret = 'mysecretkey';

export const verifyToken = (token) => {
  try {
    const decoded = jwt.verify(token, secret);
    return decoded;
  } catch (err) {
    console.error(err);
    return false;
  }
};

这里我们使用了 jsonwebtoken 库来验证 JWT。我们传递了一个 token 参数，它是我们要验证的 JWT。我们还使用了一个 secret 参数来指定与创建 JWT 时使用的相同密钥。如果验证成功，verifyToken 函数将返回一个解码后的对象，其中包含了 JWT 的有效负载。如果验证失败，则函数将返回 false。

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

现在我们已经有了创建和验证 JWT 的函数，我们可以在 Next.js 应用程序中使用它来进行身份验证。下面是一个中间件函数的示例代码：

import { verifyToken } from './jwt';

const checkAuth = (handler) => (req, res) => {
  const token = req.cookies['auth'];

  if (!token) {
    res.redirect(302, '/login');
    return;
  }

  const decoded = verifyToken(token);
  if (!decoded) {
    res.redirect(302, '/login');
    return;
  }

  req.user = decoded;
  return handler(req, res);
};

export default checkAuth;

这里我们首先引入了 verifyToken 函数。然后我们定义了一个名为 checkAuth 的中间件函数，它接受一个处理函数并返回一个新的函数。我们检查了请求的 Cookie 中是否存在 JWT。如果没有，我们将重定向到登录页面。如果存在 JWT，则使用 verifyToken 函数来验证 JWT，如果验证失败，则重定向到登录页面。最后，如果 JWT 验证成功，我们将解码后的信息存储在 req.user 中，然后调用处理函数。

现在我们只需要将这个中间件函数应用到需要身份验证的页面上即可。在需要身份验证的页面中，我们只需要导入中间件函数并将其包装在处理函数之外即可。

import checkAuth from './checkAuth';

const handler = (req, res) => {
  // 处理函数的代码
};

export default checkAuth(handler);

现在访问该页面时，我们将自动进行身份验证并重定向到登录页面，直到 JWT 验证成功为止。

总结

在本文中，我们介绍了 JWT 的作用、创建和验证 JWT 的代码，以及如何在 Next.js 项目中使用 JWT 进行身份验证。JWT 是一个非常优秀的身份验证标准，它可以让我们在不使用 Cookie 的情况下实现安全的身份验证。使用 JWT 进行身份验证已经成为现代 Web 应用程序的标准做法，我们希望本文能够为您提供帮助。

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