nextjs jwt authentication

Next.js JWT身份验证

用于使用JWT证明Next.js应用的身份验证的概念验证应用程序。

该应用是在假设渲染服务器和API服务器被解耦的假设下进行的。

它使用此API进行身份验证。

主意：

服务器端渲染应用程序很棒。它们在整体应用程序和由微服务提供动力的单页应用程序之间成为一个甜蜜的位置。但是它们也为他们的创造增加了复杂性。保持状态在服务器上，客户端，在客户端和服务器上进行路由，在服务器渲染之前加载数据等是使我们的应用程序更加复杂的某些内容。这就是为什么存在诸如Next.js之类的框架来解决大多数问题的原因。但是，诸如身份验证之类的东西留给了我们。这是试图基于JWT实施身份验证的尝试。问题是我们不能像水疗中心那样存储在LocalStorage中的令牌。

这个想法是从客户端上的服务器接收令牌，将其存储在cookie中，然后每当在服务器上呈现页面时，我们都可以从cookie访问令牌。

它的工作原理：

客户：

用户从客户端发送验证请求。在响应中，收到JWT并存储在浏览器饼干和Redux商店中。然后，用户可以从客户端访问令牌，并可以使用它来访问受保护的路由。

服务器：

当用户提出页面请求时，也会发送cookie，以便服务器可以读取它们。要阅读它，用户使用Next.js提供的getInitialProps生命周期方法。它得到一个参数 - 包含某些属性的上下文对象。您可以在这里阅读更多有关它的信息。在req属性上，我们可以访问包含带有令牌的cookie的headers属性。派遣了动作创建者以将令牌保存在Redux Store中，并且该应用程序现在可以再次访问令牌。

用法：

安装：

确保安装了节点和NPM。

还要确保您运行API服务器。

git clone https://github.com/alan2207/nextjs-jwt-authentication
cd nextjs-jwt-authentication
npm install

启动应用程序：

 # Run in dev mode:
npm run dev

# Run in production:
npm run build
npm start