数据未存储在 Angular 5 的 localStorage 中答案

【问题标题】：Data not storing in localStorage in Angular 5数据未存储在 Angular 5 的 localStorage 中
【发布时间】：2018-12-06 21:20:46
【问题描述】：

你好互联网人，

我正在尝试制作一个以 Mongoose 作为后端的 Angular 5 应用程序。现在我想将数据（身份验证令牌）存储在 localStorage 中，以便用户在关闭页面后保留他们的身份验证令牌。此令牌用于访问我们的 Mongoose 端点。

当我们在登录后尝试访问令牌时（您在登录后获得令牌）它确实会检索它（我们在控制台日志中看到过）但是当我们尝试将其设置为未来请求的标头时给我们一个 403 禁止错误。

这是错误：

这是我们用来初始化标头和带有令牌的 localStorage 的代码：

private token = localStorage.getItem('token');
private headers = new Headers({'token': this.token});
public headerDict = new Headers({
    'token': this.token
  });

  public requestOptions = {
    headers: new Headers(this.headerDict),
  };

这是我们尝试使用给定标题的方法：

getUser() {
    console.dir(this.headers);
    console.log('tokenAndereManier: ' + localStorage.token);

    return this.http.get(this.serverUrl + (localStorage.userid || '5a3fd41e3ef7ccda81e7dda4'), { headers: this.headerDict})
      .toPromise()
      .then(response => {
        return response.json() as User;
      })
      .catch(error => {
        return this.handleError(error);
      });
  }

编辑：After changing headerdict

【问题讨论】：

您的前端代码中的this.token 指的是什么？您将代码初始化为局部变量，但稍后尝试从周围的对象访问它。我会说你在某处丢失了令牌。你能确认它在网络面板中吗？
mongoose 后端接收什么数据（认证令牌）？ 403 错误表明提供的身份验证令牌（我怀疑它可能为空、无效或错误）在您的应用程序权限上下文中无效。您可以在网络选项卡中检查这一点，并告诉我们哪些标头正在发送到后端。
@JulienAmbos mongoose 后端没有收到身份验证令牌，它显示为“null”，如图所示。这很奇怪，因为当我们 console.log 时，它确实显示了它。因此，当我们尝试发送带有令牌的标头时，该值消失了。
是不是因为token是异步获取的，你想同步做这个过程？
看来您应该在“headerDict”中使用“localStorage.token”而不是“this.token”

标签： node.js angular session mongoose local-storage

【解决方案1】：

您在 console.log 中调用 localStorage.token，但在您的状态下，您正尝试使用 this.token。由于thisproperty 只是对其他地方的引用，我建议使用localStorage 前缀。

【讨论】：