dynamische Aktualisierung der Vorlage auf einer Komponente

Question

Ich möchte eine andere Vorlage machen, wenn die Authentifizierung fehlgeschlagen:

@Component({ 
    selector: 'app-root', 
    templateUrl: './a.html', 
    }) 
export class AppComponent implements OnInit { 
    ngOnInit() { 
     if (!this.isAuthenticated()) { 
      this.templateUrl = './b.html'; 
     } 
    } 
    isAuthenticated(): boolean { 
     // return by user authenticate status 
    } 
} 

Answer 1

Was Sie brauchen eigentlich eine Wache und keine Umleitung oder eine andere Komponente.

Neues authentication.guard.ts mit diesem Code:

@Injectable() 
export class AuthenticationGuard implements CanActivate { 

constructor(
    private router: Router, 
    private authenticationService: AuthenticationService, 
) {} 

public canActivate(): boolean { 
    if (this.authenticationService.isLoggued()) { 
     return true; 
    } 

    this.router.navigate(["/login"]); 
    return false; 
} 

}

In Ihrer Route Definition an, dass der Zugriff auf eine definierte Komponente soll durch diesen Wächter geschützt werden:

{ path: "yourRoute", component: DummyComponent, canActivate: [AuthenticationGuard] }, 

Jetzt wird jede Anfrage mit diesem Schutz "überprüft". Und du bist gut zu gehen.