Angular2路由器

Question

I have been creating a web application with Angular2 and Firebase, first I check if the user is authenticated or not, if user is authenticated, he will be redirect to a page that contains the list of groups otherwise he will be redirect to a login page.
The problem is that the menu and the header are always visible. I want the menu and the header of the application will not be displayed when user redirect to login page. how I can do this.

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;
  }

Thanks in advance.

Answer 1

Your approach is wrong. You are using router-outlet in your app.component.html with menu and header code that's why the menu and the header of the app will always be displayed when user redirects to login page. The problem is in your rendering because your login page is rendered inside your header and menu div code.

There could be many ways but according to me, your app should firstly show login page If the login is successful then It should redirect to some main page in which you will have header and menu as in your app.component.html.

Answer 2

The issue is that you need to change your this.userconnected state on logout.

app.component.ts will check and set that value only inside of the constructor .

Try to subscribe to onAuthStateChanged and set there your this.userconnected state.