각도, 사용자가 로그인했는지 여부를 알려주는 방법은 무엇입니까?

Question

저는 신입생 angularfire2입니다. 현재 인증을 시도하고 사용자에게 이미 로그인 또는 로그 아웃했음을 알리고 있습니다. 현재 버전은 angularfire2": "^5.0.0-rc.4입니다. this link에서 예제를 발견했지만 어떻게 작동하는지 잘 모르겠습니다. 내가해야 할 일은 사용자에게 "you are not logged in, please log in first"과 같은 것을 알려주고 그들이 로그인 할 때 "you are logged in"과 같을 것입니다 (메시지에 로그인하지 않은 것은 false/표시되지 않습니다).

//auth.service.ts 
 
login() { 
 
    this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider()); 
 
} 
 

 
private currentUser: firebase.User = null; 
 
isLogin() { 
 
    if (this.currentUser == null) { 
 
    return false; 
 
    } else { 
 
    return true; 
 
    } 
 
} 
 

 
logOut() { 
 
    this.afAuth.auth.signOut(); 
 
    console.log(this.afAuth.authState); 
 
} 
 

 
//app.component.ts 
 
disableBtn: boolean = false; 
 
disableBtn2: boolean = false; 
 

 
CallLogin() { 
 
    this.AuthService.login(); 
 
} 
 

 
isLoggedIn() { 
 
    return this.AuthService.isLogin(); 
 
} 
 

 
CallLogOut() { 
 
    this.AuthService.logOut(); 
 
}

<!--app.component.html--> 
 
<div *ngIf="isLoggedIn() || !disableBtn2"> 
 
<p>you are not logged in</p> 
 
<a href="#" (click)="CallLogin(); disableBtn=!disableBtn">LOGIN</li> 
 

 
<div *ngIf="isLoggedIn() || !disableBtn"> 
 
<p>you are logged in</p> 
 
<a href="#" (click)="CallLogOut(); disableBtn2=!disableBtn2">LOG OUT</a> 
 
</div>

누군가 날이 제발 알아내는 데 도움이 수 있습니까?

Answer 1

당신은 ..이 내 예입니다 auth.quard.ts 서비스

import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot } from '@angular/router'; 
import { Injectable } from '@angular/core'; 
import { Observable } from 'rxjs/Observable'; 
import { AuthService } from '../services/auth.service'; 

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private authService: AuthService, 
    private router: Router) { 
    } 

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Promise<boolean> | boolean { 
    return this.authService.isAuthenticated().toPromise().then((logInStatus) => { 
     if (!logInStatus) { 
     this.router.navigate(['/auth/login']); 
     return false; 
     } 
     return true; 
    }); 
    } 
} 

을 추가해야합니다 그리고 당신은 내가 그것을

Answer 2

도움이되기를 바랍니다

{ 
    path: 'account', 
    component: AccountLayoutComponent, 
    canActivate: [AuthGuard], // <-------------- 
    children: [ 
     { 
      path: '', 
      loadChildren: './account/account.module#AccountModule' 
     } 
    ] 
}, 

당신의 경로에서 사용할 수 있습니다 AngularFire2는 authState을 제공합니다. 예 :

서비스 :

import { Injectable } from '@angular/core'; 
import { Observable } from "rxjs/Rx"; 

import { AngularFireDatabase } from 'angularfire2/database'; 
import { AngularFireAuth } from 'angularfire2/auth'; 

@Injectable() 
export class AuthenticationService { 

    private authState: any; 

    constructor(public afAuth: AngularFireAuth, private db: AngularFireDatabase) { 
     this.afAuth.authState.subscribe((auth) => { 
      this.authState = auth 
     }); 
    } 

    get authenticated(): boolean { 
     return this.authState !== null; 
    } 
} 

테스트 :

@Injectable() 
export class myComponent { 

    constructor(private auth: AuthenticationService) {} 

    test() { 
    console.log(this.auth.authenticated ?? 'Loged', 'not logged'); 
    } 
} 

[이 코드를 실행하면 내 코드의 조각, 나는 (내가하면 고칠 수) 모르는]