Angular2路由器

Question

我一直在使用Angular2和Firebase创建一个Web应用程序， 首先，我检查用户是否经过身份验证，如果用户通过身份验证，他将重定向到包含组列表的页面，否则他将重定向到登录页面。
问题是菜单和标题始终可见。 我希望当用户重定向到登录页面时，菜单和应用程序的标题不会显示。 我该怎么做。

app.component.ts

  constructor(public af: AngularFire,private  router:Router){
      this.af.auth.subscribe(auth => {
     if(auth) {
       this.userconnected = auth;
     }
}

app.component.html

<app-appheader *ngIf="userconnected"  [userconnected]="userconnected"></app-appheader>
<app-appmenu *ngIf="userconnected" [userconnected]="userconnected" data-spy="affix"></app-appmenu>
<div class="content-wrapper">
  <section class="content">
    <div class="row">
      <router-outlet></router-outlet>
    </div>
  </section>
</div>
<app-appfooter></app-appfooter>

app.routes.ts

  { path: 'groups', component: ListgroupsComponent, canActivate: [AuthGuard] },   
  { path: '', redirectTo: 'groups', pathMatch: 'full' },
  { path: 'login', component: LoginComponent },

groups.component.ts

  ngOnInit() {
    console.log("ngOnInit list surveu");
    this.af.auth.subscribe(auth => {
      if(auth) {
        this.name = auth;
        this.ifInfoUser(this.name.auth.uid)
      }
    });
}


  ifInfoUser(idUser):boolean{
    console.log('BeginifInfoUser');
    const user = this.af.database.object('/users/'+idUser);
    user.subscribe(data => {
      console.log("data");
      if(data.uid!=null){
        this.existUser=true;
        this.router.navigate(['/groups']);
      }else{
        this.existUser=false;
        this.router.navigate(['/login']);
      }
    });

return this.existUser;
  }

提前致谢。

Answer 1

你的做法是错误的。您在 app.component.html 中使用路由器插座，其中包含菜单和标题代码，这就是当用户重定向到用户时，菜单和应用标题将始终显示的原因登录页面。问题在于渲染，因为您的登录页面是在标题和菜单div代码中呈现的。

可能有很多方法，但根据我的说法，您的应用应该首先显示登录页面如果登录成功，那么它应该重定向到某个主页面，您将在app.component.html中拥有标题和菜单。

Answer 2

问题是您需要在注销时更改this.userconnected状态。

app.component.ts将仅在constructor内部检查并设置该值。

尝试订阅onAuthStateChanged并设置this.userconnected州。