首页 > 代码库 > [AngularFire2] Building an Authentication Observable Data Service
[AngularFire2] Building an Authentication Observable Data Service
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
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。