浏览器刷新Angular 2后Firebase变量变为空答案

【问题标题】：Firebase variable becomes null after browser refresh Angular 2浏览器刷新Angular 2后Firebase变量变为空
【发布时间】：2017-09-10 03:41:13
【问题描述】：

我是 Angular 2 的新手，我已经成功实现了基于用户设置的电子邮件和密码的 Firebase 身份验证。

一旦用户登录，Firebase 变量就会被初始化，并且可以在整个应用程序中访问，但是一旦用户进入应用程序并刷新页面，Firebase 变量就会变为空。

我的问题是如何在刷新后保持 Firebase 状态。尝试了本地存储方法，但这似乎不合适。 SO 中的大多数相关查询都是针对 AngularJS 的。

有什么想法吗？

编辑

Firebase 在 appcomponant.ts 文件中初始化

  firebase.initializeApp({
  apiKey: 'A******E',
  authDomain: 'e******m',
  databaseURL: 'h*****m',
  projectId: 'e******r',
  storageBucket: 'e******m',
messagingSenderId: '****93***'
});

在我正在使用的登录服务中

  signInUser(email: string, password: string) {
return firebase.auth().signInWithEmailAndPassword(email, password);

}

一旦用户通过身份验证，他就会被引导到一个名为设置的页面。在设置组件中，我想获取经过身份验证的用户的电子邮件。当流程是 userlogin-->settings 页面时，一切顺利，firebase 不为空。

当用户在设置页面按 F5 刷新页面时，问题开始，此时 Firebase 对象变为空。

【问题讨论】：

你看过github.com/angular/angularfire2吗？
Firebase 将身份验证状态保留在 localStorage 中。它不应该在页面刷新时被清除。您在什么环境下为您的应用提供服务？
正如 bojeil 所说，身份验证状态会自动保持。因此，这可能是特定于您的情况的问题。没有看到minimal code that reproduces the problem，我们只能推测原因。
添加了一些代码，代码本身非常简单。至于身份验证状态，如果 Firebase 保留身份验证状态，那么如何在不导致用户重新登录的情况下获取经过身份验证的用户详细信息。查看 Firebase 文档，我没有找到任何相关的方法。

标签： javascript angular typescript firebase firebase-authentication

【解决方案1】：

用户 LocalStorage 存储您从 firebase 收到的令牌。要在本地存储中设置，您可以这样做

localStorage.setItem('fireBaseToken', 'token');

然后在你的主 app.component.ts 检查令牌是否存在，如果它确实将它添加到你的变量中，否则将用户重定向到再次登录。

注意

默认情况下，Angular CLI 应将“dom”添加到您的 tsconfig.json 中，否则请自行添加。

【讨论】：