Q:

Angular 5 RxJS and redirect to dashboard page without loading main page firstly

I use Firebase system as API in my app (auth, database, storage, etc.)
I created main page (localhost:4200), which is loading when the user is not logged in, and dashboard (localhost:4200/dashboard) for logged in users.
In my app.component.ts constructor i write the code:
    constructor(private authorizationService: AuthorizationService,
              private router: Router,
              private firebaseAuth: AngularFireAuth,
              private firebaseDatabase: AngularFireDatabase,
              private firebaseStorage: AngularFireStorage) {

    firebaseAuth.authState.subscribe((firebaseUser) => {
      if (firebaseUser != null) {
        this.firebaseUser = firebaseUser;
        this.router.navigate(['dashboard']);
      }
    });
  }

and in app.component.html 
<router-outlet></router-outlet>

app.routing.module.ts:
import {NgModule} from '@angular/core';
import {AuthorizationService} from './services/authorization.service';
import {RouterModule, Routes} from '@angular/router';
import {DashboardPageComponent} from './private/dashboard-page/dashboard-page.component';
import {CanActivateAuthGuard} from './can-activate-auth-guard';
import {LoginPageComponent} from './public/login-page/login-page.component';
import {MainPageComponent} from './public/main-page/main-page.component';
import {RegisterPageComponent} from './public/register-page/register-page.component';
import {ContactPageComponent} from './public/contact-page/contact-page.component';

const appRoutes: Routes = [
  {path: '', component: MainPageComponent, pathMatch: 'full'},
  {path: 'login', component: LoginPageComponent},
  {path: 'register', component: RegisterPageComponent},
  {path: 'contact', component: ContactPageComponent},
  {path: 'dashboard', component: DashboardPageComponent, canActivate: [CanActivateAuthGuard]}
];

@NgModule({
  imports: [
    RouterModule.forRoot(appRoutes)
  ],
  providers: [
    AuthorizationService
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule {
}

can-activate-auth-guard.ts:
import {Injectable} from '@angular/core';
import {CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router} from '@angular/router';
import {Observable} from 'rxjs/Observable';
import {AngularFireAuth} from 'angularfire2/auth';

@Injectable()
export class CanActivateAuthGuard implements CanActivate {
  constructor(private router: Router,
              private firebaseAuth: AngularFireAuth) {
  }

  canActivate(route: ActivatedRouteSnapshot): Observable<boolean> | Promise<boolean> | boolean {
    return this.firebaseAuth.authState
      .map(authState => !!authState)
      .do(angularFireAuth => !angularFireAuth ? this.router.navigate(['/']) : true);
  }
}

But before finished the subscribe method the main page is loading fristly and after the while redirect to /dashboard.
I paste the video when i record my problem: 
https://drive.google.com/open?id=1VwgGynxUFPdcpLPkMVopncLEQP-LpasY
Please help me what i can do, that to first check is the user is logged in and next redirect to dashboard without loading main page firstly. I dont't have idea to resolve this problem, because I just learning the angular and RxJS.
Thank you in advance.

A:

You seems to have some confusion with RxJs and angular Guards
Problem
The first issue lies with the following piece of code .
return this.firebaseAuth.authState
  .map(authState => !!authState)
  .do(angularFireAuth => !angularFireAuth ? this.router.navigate(['/']) : true);

Here the Map operator is returning a boolean value. If the !!authState is true, it allows route to navigate to DashboardPageComponent else nothing.
The use of Do Operator is to perform side operations / side-effects. The Do operator does not transform values(in other words does not affect stream). Here the do operator navigates to '/' route if angularFireAuth is false else nothing. Here !angularFireAuth ? this.router.navigate(['/']) : true the ternary operator is useless. the second expression does nothing.
The Second Issue lies with the following peice of code in app.component.ts . There is no need to write this.
firebaseAuth.authState.subscribe((firebaseUser) => {
  if (firebaseUser != null) {
    this.firebaseUser = firebaseUser;
    this.router.navigate(['dashboard']);
  }
});

Solution
Create two guards. One LoggedInGuard for component: DashboardPageComponent
 and another NotLoggedInGuard for component: MainPageComponent. Or name them whatever you like.
LoggedInGuard
return this.firebaseAuth.authState
   .map(authState => !!authState);

NotLoggedInGuard
return this.firebaseAuth.authState
   .map(authState => !authState);

Write above code in their respective canActivate() functions and add them in appRoutes just as you have done before.

