在 Angular 重建时丢失 API JWT 身份验证

Posted 2023-03-10

【中文标题】在 Angular 重建时丢失 API JWT 身份验证

【英文标题】：Losing API JWT authentication on Angular rebuild

【发布时间】：2021-09-17 13:11:54

【问题描述】：

对不起，如果这不适合这个论坛，但我不知道该怎么做。我没有在这里发布代码，因为我希望这个问题会提示我可以查看/尝试的 3-4 件事的建议。

我正在使用一个有天赋的开发人员提供的 2 个样板：一个 C# .net 核心 webAPI 和 Angular 10 接口和 MS SQL db。我能够让他们在我的数据库中进行身份验证等工作，并且我开始对其进行自定义，添加基本功能、表单等。然而，我做了一些事情，我把它弄坏了，我最近保存到 GitHub 的时间比我意识到的要老得多。我最终不得不将它重新拼凑起来，但显然错过了一些东西。

身份验证工作正常。我面临的唯一问题是，现在当我在 Angular 界面上执行 MS Code 中的全部保存（并且界面刷新）时，我必须再次登录。以前没有这样做过，我真的很想回到我不必每次执行“全部保存”时都登录的地方。

关于我可能会检查什么以了解为什么身份验证无法在刷新后幸存的任何建议？提前非常感谢。

[新信息 2021 年 7 月 12 日]

[authenticate and refresh-token code][1]
[setTokenCookie code][2]
[getRefreshToken code][3]

【参考方案1】：

通常将 JWT 放在本地存储中，然后在刷新时将其读出。也许错过了？

您看到本地存储中保存的任何内容吗？ Example localstorage from Chrome developers tools

如果是这样，那么它可能会在刷新时错过读取 JWT，在您的 Angular 项目中查找 localstorage，如果找到并且它正在读取 JWT，则在刷新时运行该代码，例如一些自动登录代码可能如下所示：

 autoLogin() 
    const userData = JSON.parse(localStorage.getItem('user'));
    if (!userData) 
      return;
    
    const loadedUser = new User(userData.email, userData.id, userData._token, new Date(userData._tokenExpirationDate));
    return loadedUser;
  

并且该代码可能会在启动时在 app.component.ts 中运行（默认情况下是 Angular 中的引导组件）：

ngOnInit(): void 
  this.authService.autologin();
  

【讨论】：

谢谢，这正是我所希望的那种线索/建议。 JWT 存储在 RefreshToken 表中的 SQL 数据库中，并在我登录和令牌过期时更新。当我刷新时，我仍然需要重新登录，即使之前的刷新令牌仍在表中。令牌的寿命为 1 周。

经过深入审查，很明显该 api 应该将 cookie 写入计算机，但事实并非如此。 Refresh-Token 方法查找该 cookie 并将其与 db 进行比较，当然没有找到匹配项，因为没有 cookie 开始。我敢肯定，一旦我解决了 cookie 写入问题，它就会再次起作用。

Cookie 比 localstorage 少一些，因为 cookie 随任何请求一起发送，而不仅仅是您在拦截器中指定的请求。您确定它不只是在授权标头中寻找令牌吗？ ``` const authReq = !!user ? req.clone( setHeaders: Authorization: 'Bearer' + user.token , ) : req; ```

谢谢狂野比尔。我发布了一些代码片段在我看来，refresh-token 正在寻找 refreshToken cookie 来获取令牌值，然后检查数据库表中是否存在令牌。 refreshToken cookie 不是一开始就被写入的，所以它会出错。奇怪的是它以前工作得很好，在同一台电脑上。我不知道为什么它不写cookie。

【参考方案2】：

问题与 SameSite 设置有关（我的代码没有）

我在 CookieOptions 中添加了以下内容

安全 = 真， SameSite = SameSiteMode.None，

马上解决！