Nsryjdtyk

Whenever I navigate to /about page my app ends up in an infinite loop with the error Throttling history state changes to prevent the browser from hanging.

Whenever I navigate to / page my app doesn't navigate to dashboard, it just displays a blank page.

I am expecting my page to navigate to /dashboard if a token is found and /home or / when it isn't.

Furthermore, I would like the remaining pages linked below to be inaccessible (apart from dashboard), if a token is found.

How can I fix this?

app.routing.component.ts

const routes: Routes = [

  { path: 'about', component: AboutComponent, canActivate: [AuthGuard] },

  { path: 'home', component: HomeComponent },

  { path: 'dashboard', component: DashboardComponent, canActivate: [AuthGuard] },

  { path: 'careers', component: CareersComponent },

  { path: 'contact', component: ContactComponent },

  { path: 'legal', component: LegalComponent },

  { path: 'login', component: LoginComponent },

  { path: 'press', component: PressComponent },

  { path: 'markets', component: MarketsComponent },

  { path: 'markets/:symbol', component: PriceComponent },

  { path: 'register', component: RegisterComponent },

  { path: 'status', component: StatusComponent },

  { path: 'services', component: ServicesComponent },

  { path: 'support', component: SupportComponent },

  { path: 'support/account-management', component: AccountManagementComponent },

  { path: 'support/transactions', component: TransactionsComponent },

  { path: 'support/payment-methods', component: PaymentMethodsComponent },

  { path: 'support/security', component: SecurityComponent },

  { path: 'support/task-administration', component: TaskAdministrationComponent },

  { path: 'support/wallet-services', component: WalletServicesComponent },

  { path: '**', redirectTo: '', pathMatch: 'full' },

  { path: '', component: HomeComponent },

];



@NgModule({

  imports: [RouterModule.forRoot(routes)],

  exports: [RouterModule],

})

export class AppRoutingModule implements OnInit {

  constructor() { }



  ngOnInit() {

    RouterModule.forRoot(routes, { scrollPositionRestoration: 'enabled' });

  }

}

auth.guard.ts

@Injectable()

export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService,

    private router: Router) {

  }



  canActivate(

    _next: ActivatedRouteSnapshot,

    _state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {

    if (this.authService.isLoggedIn()) {

      this.router.navigate(['dashboard']);

      if (environment.production === false) {

        console.log('Token found, redirecting to dashboard');

      }

      return true;

    } else {

      this.router.navigate(['home']);

      if (environment.production === false) {

        console.log('Token not found, redirecting to home');

      }

      return false;

    }

  }

}

auth.service.ts

@Injectable()

export class AuthService {

  constructor(private myRoute: Router) { }



  getToken() {

    return localStorage.getItem('token');

  }



  isLoggedIn() {

    return this.getToken() !== null;

  }



  logout() {

    localStorage.removeItem('token');

    this.myRoute.navigate(['login']);

  }

}