zoukankan      html  css  js  c++  java
  • [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;
            }
          )
      }
  • 相关阅读:
    《一线架构师》之Refined Architecture阶段
    可修改性战术分析
    上周学习总结
    软件质量属性之可修改性
    《信息领域热词分析》实现六种质量属性
    质量属性的六个常见属性应用场景(淘宝篇)
    软件架构师如何工作
    信息领域热词分析
    结合ssh谈MVC架构模式
    PythonCPPJava的异同
  • 原文地址:https://www.cnblogs.com/Answer1215/p/6087731.html
Copyright © 2011-2022 走看看