如何在Next.js中实现身份验证

Question

我是Next.js的新手，我正在使用jwt令牌与身份验证系统进行斗争。我想知道使用身份验证系统存储jwt令牌和路由的最佳/标准方法是什么。我一直在尝试不同的方法，从不同的教程/文章，但不太明白。这是我尝试过的。

1. 当用户登录时，它会将用户名/密码发送到分离的api服务器（例如处理后端内容的新项目），服务器将使用access-token进行响应，然后在Next.js项目中，我使用收到的令牌设置cookie。在Next.js项目中，受保护的路由将使用withAuth hoc包装，它将检查cookie中的令牌。这种方法的问题是它容易受到XSS的攻击，因为cookie没有httpOnly标志。
2. 这类似于1.）但是使用localStorage，问题是access-token无法在第一次请求时发送到服务器。 （这个我不确定，但根据我的理解，在每个http请求中，我必须手动粘贴我的access-token，那么请求我无法控制？例如，首先请求或使用<a>标记）。
3. 我在Next.js服务器（自定义快速服务器）中编写了身份验证后端。用户登录时，服务器将对其进行验证，然后设置httpOnly cookie。然后问题是，使用客户端路由（使用Next.js路由器转到url），它无法检查令牌。例如，如果页面用withAuth hoc包装，但它无法使用javascript访问cookie内的令牌。

而且我见过很多人，在getInitialProps的受保护路由中，他们只检查cookie / localStorage中的存在令牌，然后如果令牌被撤销或列入黑名单，他们如何处理它因为他们没有发送令牌到服务器？或者我是否必须在每个客户端页面更改时将令牌发送到服务器？

Answer 1

随着Next.JS v8的推出，还有一些例子放在NextJS example page中。要遵循的基本思路是：

智威汤逊

• 使用cookie存储令牌（您可以选择是否进一步加密）
• 将Cookie作为授权标头发送

OAuth的

• 使用第三方身份验证服务，如OAuth2.0
• 使用Passport