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

ログアウト時にthis.userconnectedの状態を変更する必要があるという問題があります。

app.component.tsは、この値をconstructorの内部でのみチェックして設定します。

onAuthStateChangedに登録して、this.userconnectedの州を設定してください。

Answer 2

あなたのアプローチは間違っています。 ルータ出口をのapp.component.htmlに使用しています。メニューとヘッダーコードを使用すると、ユーザーがログインページにリダイレクトしたときに常にメニューとアプリケーションのヘッダーが表示されます。ログインページがヘッダーとメニューdivコードの内部にレンダリングされるため、レンダリングに問題があります。

あなたのアプリは最初にログインページを表示する必要があります。ログインが成功すると、app.component.htmlのようにヘッダーとメニューを持つメインページにリダイレクトする必要があります。