代码之家  ›  专栏  ›  技术社区  ›  Kevin Dias

Angular CanActivate重定向到浏览器上的登录刷新FireBase

  •  0
  • Kevin Dias  · 技术社区  · 8 年前

    身份验证信息

    export class AuthInfo {  
        constructor(public $uid: string) {}
    
        isLoggedIn() {
            // console.log(this.$uid);
            return !!this.$uid;
        }
    }
    

    import { Injectable } from '@angular/core';
    // tslint:disable-next-line:import-blacklist
    import {Observable, Subject, BehaviorSubject} from 'rxjs/Rx';
    import {AngularFireAuth } from 'angularfire2/auth';
    import { AuthInfo } from '../security/auth-info' ;
    import {Router} from '@angular/router';
    import * as firebase from 'firebase/app';
    
    @Injectable()
    export class AuthService {
      static UNKNOWN_USER = new AuthInfo(null);
      authInfo$: BehaviorSubject<AuthInfo> = new BehaviorSubject<AuthInfo>(AuthService.UNKNOWN_USER);
    
      constructor(private afAuth: AngularFireAuth, private router: Router) {}
        login(email, password): Observable<AuthInfo> {
            return this.fromFirebaseAuthPromise(this.afAuth.auth.signInWithEmailAndPassword(email, password));
        }
    
        // signUp(email, password) {
        //  return this.fromFirebaseAuthPromise(this.afAuth.auth.createUserWithEmailAndPassword(email, password));
        // }
    
        fromFirebaseAuthPromise(promise): Observable<any> {
            const subject = new Subject<any>();
            promise
                  .then(res => {
                        const authInfo = new AuthInfo(this.afAuth.auth.currentUser.uid);
                        this.authInfo$.next(authInfo);
                        subject.next(res);
                        subject.complete();
                        // console.log(res);
                    },
                    err => {
                        this.authInfo$.error(err);
                        subject.error(err);
                        subject.complete();
                    });
            return subject.asObservable();
        }
    
        logout() {
            this.afAuth.auth.signOut();
            this.authInfo$.next(AuthService.UNKNOWN_USER);
            this.router.navigate(['/login']);
        }
        refresh() {
            const url = window.location.href;
        } 
    }
    

    import {tap, take, map} from 'rxjs/operators';
    import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
    // tslint:disable-next-line:import-blacklist
    import {Observable} from 'rxjs/Rx';
    import {Injectable} from '@angular/core';
    import {AuthService} from '../security/auth-service';
    import { Location } from '@angular/common';
    import { auth } from 'firebase';
    import { log } from '@firebase/database/dist/src/core/util/util';
    
    @Injectable()
    export class AuthGuard implements CanActivate {
        redirectUrl: string;
        currentURL= '';
        constructor(private authService: AuthService, private router: Router) {}
    
        canActivate(route: ActivatedRouteSnapshot,
                    state: RouterStateSnapshot): Observable<boolean> {
    
            // tslint:disable-next-line:no-unused-expression
            console.log(this.authService.authInfo$);
    
            return this.authService.authInfo$.pipe(
                map(authInfo => authInfo.isLoggedIn()),
                take(1),
                tap(allowed => {
                    if  (!allowed) {
                        console.log(allowed);
                         this.router.navigate(['/login']);
                    }
                }),
            );
        }
    }
    
    1 回复  |  直到 8 年前
        1
  •  2
  •   ibenjelloun    8 年前

    authInfo$ UNKNOWN_USER take(1)

    null

    ...
    new BehaviorSubject<AuthInfo>(null);
    ...
    

    ...
    return this.authService.authInfo$.pipe(
      filter(_ => _ !== null),
      map(authInfo => authInfo.isLoggedIn()),
      take(1),
    ...
    

    推荐文章