Is it bad practice to check Auth in the Components I want to crash?

Question

I have the following authentication logic

 initAuthListener() {
    this.afAuth.authState.subscribe(user => {
        if (user) {
            this.store.dispatch(new Auth.SetAuthenticated());
            this.router.navigate(['/training']);
        } else {
            this.trainingServices.cancelSubscriptions();
                this.store.dispatch(new Auth.SetUnauthenticated());
                this.router.navigate(['/login']);
        }
    });
}

How the.Component app was

 ngOnInit(): void {
this.authService.initAuthListener();
                 }

Every first call on the page went to /login, so I passed the check to training.Component, which is where you need to get authorization.

Is it a bad practice? What would be my alternative?

---

I modified it this way, apparently it’s okay:

initAuthListener() {
    this.afAuth.authState.subscribe(user => {
        if (user) {
            this.store.dispatch(new Auth.SetAuthenticated());
            this.router.navigate(['/training']);
        } else {
             if((this.ROTAS_LIBERADAS.includes(this.router.url))){
                    this.trainingServices.cancelSubscriptions();
                    this.store.dispatch(new Auth.SetUnauthenticated());
                }else{
                    this.trainingServices.cancelSubscriptions();
                    this.store.dispatch(new Auth.SetUnauthenticated());
                    this.router.navigate(['/login']);
                }
        }
    });
}

Answer 1

The practice that use is described in the angular doc using a service with a method called Canactived and placing validation on the routes.

Example:

auth-Guard.service.ts

import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root'
})
export class AuthGuardService {

  private isAuthenticated: boolean = true;
  constructor() { }

  canActivate() {
    return this.isAuthenticated;
  }

  login(){
    return this.isAuthenticated = !this.isAuthenticated
  }
}

app.modulets.

@NgModule({
  declarations: [

  ],
  imports: [

    RouterModule.forRoot([
      { path: 'login' , component: LoginComponent },

      { path: 'welcome', canActivate: [AuthGuardService], component: WelcomeComponent }

    ])
  ],
  providers: [AuthGuardService],
  bootstrap: [AppComponent]
})
export class AppModule { }