AngularFire2 - 如何在页面刷新后保持登录状态

2024-03-22

我正在将 AngularFire2 用于应用程序,并且已经获得了与 Firebase 一起使用的注册/登录功能,但是,每次刷新页面时,登录状态都会重置并且不会持续存在。尽管我觉得我错过了一些非常小的东西,但我不太找到执行此操作的功能。

我可以使用AngularFireAuth检查某处的页面加载?

这是我的身份验证提供者代码:

import { Injectable } from '@angular/core';
import {Observable, Subject, BehaviorSubject} from "rxjs/Rx";
import {AngularFireAuth, FirebaseAuthState} from "angularfire2";
import {AuthInfo} from "./auth-info";
import {Router} from "@angular/router";

@Injectable()
export class AuthService {


  static UNKNOWN_USER = new AuthInfo(null);

  authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);


  constructor(private auth: AngularFireAuth, private router:Router) {

  }

    login(email, password):Observable<FirebaseAuthState> {
        return this.fromFirebaseAuthPromise(this.auth.login({email, password}));
    }


    signUp(email, password) {
        return this.fromFirebaseAuthPromise(this.auth.createUser({email, password}));
    }


    fromFirebaseAuthPromise(promise):Observable<any> {

        const subject = new Subject<any>();

        promise
            .then(res => {
                    const authInfo = new AuthInfo(this.auth.getAuth().uid);
                    this.authInfo$.next(authInfo);
                    subject.next(res);
                    subject.complete();
                },
                err => {
                    this.authInfo$.error(err);
                    subject.error(err);
                    subject.complete();
                });

        return subject.asObservable();
    }


    logout() {
        this.auth.logout();
        this.authInfo$.next(AuthService.UNKNOWN_USER);
        this.router.navigate(['/login']);

    }

}

先感谢您!


AngularFireAuth是一个可观察的并发出FirebaseAuthState价值观。如果用户登录并刷新页面,AngularFireAuth将发出经过身份验证的FirebaseAuthState;否则,它会发出null.

所以像这样的事情应该接近解决你的问题:

constructor(private auth: AngularFireAuth, private router:Router) {

  auth.subscribe((authState) => {
    if (authState) {
      const authInfo = new AuthInfo(authState.uid);
      this.authInfo$.next(authInfo);
    }
  });
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

AngularFire2 - 如何在页面刷新后保持登录状态 的相关文章

  • 将 firebase 框架添加到 ios 项目时出现链接器错误

    我一直在尝试将 firebase 框架添加到我的 ios 应用程序中 我按照这里的说明进行操作 https www firebase com docs ios quickstart html https www firebase com d
  • 这个特定的 ReactJs 代码是如何执行的初学者问题?

    我是初学者 正在阅读大量代码 现在我想知道下面的代码我明白这段代码在做什么 我需要澄清的是代码流程 当我运行它时 我看到图像正在加载 React 是从上到下执行代码吗 占位符图像异步获得正确的图像 但会App如果需要时间 组件会开始渲染但没
  • npm 脚本:node-sass 不监视部分 sass 文件

    我有这个项目结构 src assets css sass main scss variables scss 我正在尝试编写一个 npm 脚本 该脚本将监视我的所有 scss 文件 包括部分文件 中的更改 然后仅编译我的 main scss
  • angular.copy() 和 JSON.parse(JSON.stringify()) 之间的区别?

    有人可以解释 angular copy 和 JSON parse JSON stringify 之间的区别吗 有吗 您会推荐使用什么 angular fromJson angular toJson 与 JSON parse JSON str
  • IE 9 的子元素不透明,我无法使用 captify 阻止它

    好的 我正在使用一段名为 Captify 的 javascript 它为您的图像添加了一个带有文本的小弹出窗口 适用于所有接受 IE9 的浏览器 IE9 会淡化弹出 div 中的所有内容 我已阅读其子元素问题 但无法修复它 由于在网上任何地
  • KineticJS - 将舞台缩放到视口

    我正在努力将默认分辨率设置为 1366x756 我会根据视口来放大和缩小它 类似于此处显示的示例 http blogs msdn com b davrous archive 2012 04 06 modernizing your html5
  • JavaScript 中的常用数字

    在我的任务中 我必须编写一个程序来查找数组中最常见的数字以及它重复的次数 我写了一些东西 但只打印最大重复次数 所以我的问题是如何打印这个元素的值 最大数量 在我的例子中是 4 var array 13 4 1 1 4 2 3 4 4 1
  • Angular 2 最终版本路由器单元测试

    如何使用 karma 和 jasmine 对 Angular 2 0 0 版中的路由器进行单元测试 这是我的旧单元测试在版本 2 0 0 beta 14 中的样子 import it inject injectAsync beforeEac
  • 如何滚动到 jQuery Mobile 中的页面元素?

    我有一个很长的 jQuery 移动页面 并且想在页面加载后滚动到该页面中间的元素 到目前为止 我已经尝试了一些事情 最成功的是 jQuery document bind mobileinit function var target if t
  • HTML5 拖放 - 没有透明度?

    当我将一个元素拖放到页面上时 该元素会变成 幻影 基本上它获得了一些透明度值 有什么办法可以做到吗opacity 1 看来是做不到了 拖动的元素被放入具有自己的不透明度 低于 1 的容器中 这意味着虽然您可以降低拖动元素的不透明度 但您无法
  • 将服务连接到现有的流星帐户

    我正在设置一个流星应用程序 其中涉及使用用户名和密码进行注册 然后希望将该帐户与 Facebook 和 Twitter 连接起来 我只需使用帐户包即可轻松启动并运行第一部分 但是当我有一个登录用户调用 Meteor loginWithFac
  • 在 Chrome 中检索浏览器语言

    我一直在尝试让 momentjs 正确检测浏览器语言并本地化时间显示 按照使用 Moment js 进行区域设置检测 https stackoverflow com questions 25725882 locale detection w
  • 日期时间的自定义 JavaScriptConverter?

    我有一个对象 它有一个 DateTime 属性 我想通过 AJAX JSON 将该对象从 ashx 处理程序传递回网页 我不想使用第 3 方控件 当我这样做时 new JavaScriptSerializer Serialize DateT
  • 如何在流程图中间隔刻度线?

    我下面有一个流程图 您将看到标签被压缩 我想使刻度之间的宽度确保显示所有标签 标记如下 div div class graph info a href span span a a href class active span span a
  • 反转二进制网络

    如何反转二元方程 以便找到哪些输入将产生给定的输出 Example Inputs i0 through i8 Outputs o0 through o8 Operators XOR AND 二元方程 1 i0 1 i1 0 i2 1 i3
  • 用于客户端存储和服务器端同步的javascript库[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一个 javascript 库 它可以让我将数据存储在客户端数据库中 并在后台自动将数据库同
  • 错误:类型 typeof Observable 上不存在属性计时器

    代码如下 import Component from angular2 core import Observable from rxjs Rx Component selector my app template Ticks every s
  • Angular 2 - 将延迟作为输入参数传递给组件动画

    我想从 html 传递组件动画的延迟 例如 html
  • 禁用 Materialise Carousel 上的触摸

    看起来以前没有人问过这个问题 因为我几乎在互联网上寻找一个非常简单的答案 如何禁用在物化轮播上向左 向右滑动的功能 在 Materialize js 添加 编辑 var allowCarouselDrag true value functi
  • 如何在 Angular 2 中订阅 DOMContentLoaded 事件?

    我正在将 UI 主题从 Angular 1 移植到 Angular 2 在第 1 个版本中 我有 viewContentLoaded事件 我想将其重新制作为 Angular 2 我正在尝试使用 HostListener DOMContent

随机推荐

  • 非负整数和小数值的验证

    我的字段是 tax rate and tax amount我想在其中验证积极的价值观 我写了这个验证 format gt with gt A d Z 但它并不是像这样取带小数点的数字4 67 它给我带来了一个错误 什么类型的验证适用于整数和
  • 某些曲目上的 SoundCloud API 403

    我已经有一个使用 soundcloud API 将 soundcloud 链接嵌入为有效播放器的应用程序有一段时间了 我最近注意到中等数量的403 Unauthorized从曲目查找返回的错误 api soundcloud com trac
  • UTF-8 和 TinyXML

    由于某种原因 我无法正确从 xml 文件读取数据 例如 我得到的不是 Schr der 而是类似 Schr der 的内容 My code tinyxml2 XMLDocument doc bool open string path if
  • InternalsVisibleTo 不适用于 wpf 应用程序

    我在另一个程序集中设置了 程序集 InternalsVisibleTo GuiAssembly 但是当 wpf 绑定发生在另一个程序集中的类上时 它会抛出异常 因为该类中的属性是内部的 我知道这适用于其他应用程序 但不确定为什么它不适用于这
  • SQL Server 递归 CTE 是否被视为循环?

    我的印象是递归 CTE 是基于集合的 但是在一个最近的SO帖子 https stackoverflow com questions 7824831 generate dates between date ranges 7824919 com
  • Python-Docx 缺少默认模板

    我最近安装了 python docx 包 但在使用默认模板时遇到了一些问题 我只是设置一个文档并具有以下代码 在名为 maintitle py 的文件中 from docx import Document from docx shared
  • K 表示使用 PySpark 进行聚类

    我有一个非常大的数据框 我必须使用数据框中的特定 8 列 其中值要么是 强烈同意 同意 或 不同意 根据这 8 列 我需要创建一个新列来告诉该行属于哪个簇 1 8 最好使用 K 均值聚类 这在 PySpark 中可能吗 PS 我是 PySp
  • CodeIgniter 动态语言功能

    我是 Codeigniter 我需要为用户提供动态语言 我在标题处添加了下拉菜单 我希望允许用户在前端更改网站的语言 我尝试在一个控制器中使用以下代码更改语言 this gt config gt set item language span
  • JProgressBar 未更新

    我制作了一个非常简单的代码来在此处显示它 我有一个按钮应该显示 JDialog 来检查进度状态 我正在使用延迟调用来完成 EDT 并且我的循环不在 run 方法中 那么为什么我的酒吧没有更新吗 这是代码 import javax swing
  • RSpec 场景概要:多个测试用例

    使用 RSpec 测试一堆不同测试用例的最佳方法是什么 例如 给定字符串添加 rb https gist github com 899520 require rspec class String if method defined reve
  • Spring RMI 的替代方案是什么? (因为它已被弃用)

    Spring 似乎正在弃用它的 RMI 从 Spring Framework 5 3 开始 出于安全原因和更广泛的行业支持 现已弃用对多种远程技术的支持 支持基础设施将从 Spring Framework 的下一个主要版本中删除 但我找不到
  • PyQt - 如何导入 .qss 文件?

    如何将 qt 的样式表 qss 文件导入到应用程序 在 HTML 中我们使用 那么如何在 PyQt 中完成呢 或者我可以在哪里阅读相关内容 无法通过谷歌搜索或在 Qt 文档中找到它 qss 文件是一个简单的文本文件 如果您想将样式表应用于您
  • 使用 WCF 流上传文件,从流中进行微小读取

    我已经使用WCF的流实现了文件上传 一切都按预期进行 但是我遇到了一个问题 我分配 4kb 缓冲区来从传入流中读取数据 但 WCF 仅读取 255 字节 这是我的上传功能 public UploadResponse UploadFile F
  • 一张 Microsoft SQL 表可以有多个主键吗?

    我一直很好奇 但找不到简洁的答案 有什么帮助吗 它不能有超过一个首要的关键 但是 它的主键中可以有多于一列 它也可以有多个唯一索引 通常 唯一索引是主键 但单个表上可以有多个唯一索引 我一时想不出一个例子 但当我想到的时候我会添加它 EDI
  • 如何修复 Eclipse 警告:“建议插件 'XXX' 从 JAR 运行,指定 'unpack="false"' 属性”

    该插件确实需要解压 是的 我知道它不应该关心 但它确实关心 我只是想让这个警告消失 我该怎么做 尝试设置Bundle ClassPath在你的清单中 这个头告诉 OSGi 在你的包中哪里可以找到这些类 如果未指定 则默认值为 这意味着你的包
  • 列表框未选择所选项目

    请参阅下面的代码视觉工作室2010ListBox 上方有一个 TextBox 通过绑定 当选择某个项目时 文本框可以变大或变小 这会导致列表框移动 当列表框移动时 所选项目不是被单击的项目 所选项目是移动的ListBox 上鼠标下方的项目
  • 从不同线程读取值

    我正在用 Go 编写可以进行大量并行计算的软件 我想从工作线程收集数据 但我不太确定如何以安全的方式做到这一点 我知道我可以使用通道 但在我的场景中 它们使事情变得更加复杂 因为我必须以某种方式在主线程中同步消息 等到每个线程发送一些内容
  • R下载。文件错误无法打开URl

    temp lt tempfile download file file connect me test gz temp 该网址存在是因为我可以将其放入浏览器中 但是当我运行该代码时 出现错误 Error in download file f
  • 将 sqldf 中的整数值转换为日期时间

    我正在使用 sqldf 库返回具有不同值的数据框 并且仅返回日期列的最大值 数据框看起来像这样 NAME val1 val2 DATE A 23 7228 0 5829 11 19 2014 8 17 A 23 7228 0 5829 11
  • AngularFire2 - 如何在页面刷新后保持登录状态

    我正在将 AngularFire2 用于应用程序 并且已经获得了与 Firebase 一起使用的注册 登录功能 但是 每次刷新页面时 登录状态都会重置并且不会持续存在 尽管我觉得我错过了一些非常小的东西 但我不太找到执行此操作的功能 我可以