Html 那么，如何告诉用户他们已登录或未登录？

我是新来的。我目前正在尝试验证并告诉用户他们已经登录或注销。我当前的版本是“^5.0.0-rc.4”

angularfire2”：。我从中找到了一个例子，但我不确定它是如何工作的。我需要做的是告诉用户类似于“您未登录，请先登录”

，当他们登录时，它将类似于“您已登录”（未登录的消息将是

false

/未显示）

//auth.service.ts
登录（）{
this.afAuth.auth.signInWithPopup（new firebase.auth.GoogleAuthProvider（））；
}
private currentUser:firebase.User=null；
isLogin（）{
if（this.currentUser==null）{
返回false；
}否则{
返回true；
}
}
注销（）{
this.afAuth.auth.signOut（）；
log（this.afAuth.authState）；
}
//app.component.ts
disableBtn:boolean=false；
禁用BTN2：布尔值=假；
CallLogin（）{
this.AuthService.login（）；
}
伊斯洛格丁（）{
返回此.AuthService.isLogin（）；
}
CallLogOut（）{
this.AuthService.logOut（）；
}

您没有登录

您应该添加auth.guard.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;
    });
  }
}

从'@angular/Router'导入{ActivatedRouteSnapshot，CanActivate，Router，routerstatesnashot}；
从“@angular/core”导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从“../services/auth.service”导入{AuthService}；
@可注射（）
导出类AuthGuard实现了CanActivate{
构造函数（私有authService:authService，
专用路由器（路由器）{
}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：Promise | boolean{
返回此.authService.isAuthenticated（）.toPromise（）。然后（（logInStatus）=>{
如果（！logInStatus）{
this.router.navigate（['/auth/login']）；
返回false；
}
返回true；
});
}
}

这是我的例子。。然后你可以在你的路线上使用它

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

{
路径：'帐户'，
组件：AccountLayoutComponent，
canActivate:[AuthGuard]，//您应该添加auth.guard.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;
    });
  }
}

从'@angular/Router'导入{ActivatedRouteSnapshot，CanActivate，Router，routerstatesnashot}；
从“@angular/core”导入{Injectable}；
从“rxjs/Observable”导入{Observable}；
从“../services/auth.service”导入{AuthService}；
@可注射（）
导出类AuthGuard实现了CanActivate{
构造函数（私有authService:authService，
专用路由器（路由器）{
}
canActivate（路由：ActivatedRouteSnapshot，状态：RouterStateSnashot）：Promise | boolean{
返回此.authService.isAuthenticated（）.toPromise（）。然后（（logInStatus）=>{
如果（！logInStatus）{
this.router.navigate（['/auth/login']）；
返回false；
}
返回true；
});
}
}

这是我的例子..然后你可以在你的路线中使用它

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

{
路径：'帐户'，
组件：AccountLayoutComponent，
canActivate:[AuthGuard]，//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;
    }
}

测试：

[我的代码片段，我不知道此代码是否运行（如果不运行，我可以修复）]
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;
    }
}

测试：

[我的代码片段，我不知道此代码是否运行（如果不运行，我可以修复）]
检查此检查此