After successfully login, we want something help to check whether user has already login or not. And we will use Observable to do that.

Create AuthInfo.ts:

export class AuthInfo {
constructor(private uid$: string){ } isLoggedIn() {
return !!this.uid$;
}
}

The class is very simple, accpets an uid which return from FirebaseAuth, and a method to check whether id is set already.

TO user Observable to handle the data:

AuthService.ts:

  static UNKNOW_USER = new AuthInfo(null); // Create a default unknow user
public authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOW_USER); // We user BehaviorSubject to to conver to Observable, Behavior Subject already needs a default value, so we can repersent logout status by using default value
  login(email, password) {

    return this.fromFirebaseAuthPromise(this.auth$.login({
email, password
},{
method: AuthMethods.Password,
provider: AuthProviders.Password
}));
} fromFirebaseAuthPromise(promise) {
const subject = new Subject<any>(); promise.then((res) => {
const uid = this.auth$.getAuth().uid;
const authInfo = new AuthInfo(uid);
this.authInfo$.next(authInfo);
subject.next(res);
subject.complete();
}, err => {
this.authInfo$.error(err);
subject.error(err);
subject.complete();
}); return subject.asObservable();
}

Everytime,we successfully login, will emit a uid.

So to show / hide show content based on 'authInfo$', we can do:

      <md-list-item>
<a
*ngIf="authInfo$.isLoggedIn()"
[routerLink]="['/heros', {outlets: {'wiki': null}}]"
routerLinkActive="active"
[routerLinkActiveOptions]="{exact: true}"
>Heros</a>
</md-list-item>
  authInfo$;
constructor(private auth: AuthService){
this.auth.authInfo$.subscribe(
res => {
this.authInfo$ = res;
}
)
}

[AngularFire2] Building an Authentication Observable Data Service的更多相关文章

  1. WCF Data Service

    WCF Data Service:http://www.cnblogs.com/shanyou/category/240225.html

  2. 我的WCF Data Service 系列 (一、为什么要有WCF Data Service)

    开篇先说两名题外话, 在博问上,经常看到有个问性能问题,比如Entity Framework的性能行不行啊之类的. 其实这个行不行,关键还是看对象,一夜家族的老七可能勉强吃点蓝片片,也就行了,可真要让 ...

  3. WCF Data Service 使用小结(二) —— 使用WCF Data Service 创建OData服务

    在 上一章 中,介绍了如何通过 OData 协议来访问 OData 服务提供的资源.下面来介绍如何创建一个 OData 服务.在这篇文章中,主要说明在.NET的环境下,如何使用 WCF Data Se ...

  4. WCF Data Service 使用小结 (一)—— 了解OData协议

    最近做了一个小项目,其中用到了 WCF Data Service,之前是叫 ADO.NET Data Service 的.关于WCF Data Service,博客园里的介绍并不多,但它确实是个很好的 ...

  5. WCF Data Service 使用小结 —— 了解OData(一)

    最近做了一个小项目,其中用到了 WCF Data Service,之前是叫 ADO.NET Data Service 的.关于WCF Data Service,博客园里的介绍并不多,但它确实是个很好的 ...

  6. 调用WCF Data Service的几点Tips

    使用Linq实现sql in statement的时候,用EF的时候可以通过Contains.Exists的方法实现.但是在使用WCF Data Service的context的时候,会报不支持该方法 ...

  7. Custom Data Service Providers

    Custom Data Service Providers Introduction Data Services sits above a Data Service Provider, which i ...

  8. 自定义Data Service Providers

    自定义Data Service Providers 作者:AlexJ 翻译:谈少民 原文链接:http://blogs.msdn.com/b/alexj/archive/2010/01/07/data ...

  9. 使用WCF Data Service 创建OData服务

    使用WCF Data Service 创建OData服务 在 上一章 中,介绍了如何通过 OData 协议来访问 OData 服务提供的资源.下面来介绍如何创建一个 OData 服务.在这篇文章中,主 ...

随机推荐

  1. 在带(继承)TextView的控件中,在代码中动态更改TextView的文字颜色

    今天由于公司项目需求,须要实现一种类似tab的选项卡,当时直接想到的就是使用RadioGroup和RadioButton来实现. 这种方法全然没问题.可是在后来的开发过程中,却遇到了一些困扰非常久的小 ...

  2. 给指定的用户无需密码执行 sudo 的权限

    给指定的用户无需密码执行 sudo 的权限 cat /etc/passwd 可以查看所有用户的列表 w 可以查看当前活跃的用户列表 cat /etc/group 查看用户组 cat /etc/pass ...

  3. matlab (.m)文件生成 windows 可执行(.exe)文件

    mex -setup:设置 C 语言编译器:(如果本地安装有 visual studio 20xx 集成开发环境,则会自动选择其下的 C/C++ 编译器 ) 将运行时环境(runtime enviro ...

  4. arm-linux-gcc 命令未找到问题

    解决方法: 1.先打开一个超级用户权限的shell: 命令: ubuntu :sudo –s centos :su - 2.在当前shell下,设置环境变量: 命令:gedit /etc/profil ...

  5. teamviewer连接不上的原因及解决方法有哪些

    teamviewer连接不上的原因及解决方法有哪些 一.总结 一句话总结:这里说的就是版本问题,高版本可以连接低版本,低版本无法连接高版本. 1.TeamViewer官方检测使用环境是否为商用的标准是 ...

  6. UML学习之初步总结

    UML(Unified Modeling Language)即统一建模语言,是一种开放的方法,用于说明.可视化.构建和编写一个正在开发的.面向对象的.软件密集系统的制品的开放方法.UML展现了一系列最 ...

  7. 【2017中国大学生程序设计竞赛 - 网络选拔赛 hdu 6150】Vertex Cover

    [链接]点击打开链接 [题意] 有人写了一个最小点覆盖的贪心算法,然后,让你去hack它. 并且,要求这个算法得到的错误答案,是正确答案的三倍. 让你任意输出hack数据,点数<=500 [题解 ...

  8. [Node.js] Node Util Promisify - How to Convert Callback Based APIs to Promise-based

    Since Node.js V8.0+, it introduces a 'util' libaray, which has a 'promisfy' function. It can conver ...

  9. 微信支付v2开发(5) 订单查询

    本文介绍微信支付中订单查询功能的实现. 作者:方倍工作室 地址:http://www.cnblogs.com/txw1958/p/wxpay-order-query.html 一.订单查询 因为某一方 ...

  10. 添加asp.net mvc到现有的asp.net web form 应用程序

    前言 asp.net mvc的前一版本为asp.net web Form(Asp.net mvc之前称为asp.net),其第一个版本与2002年年初发布.asp.net web form 属于.ne ...