角度4 ngOnInitでのリダイレクト

Question

私はAngular 4アプリケーションで作業しています。私はapp.componentをロードする前にユーザーを承認したい（このapp.componentは初期化しないでください）、APIをチェックすることによって承認されていない場合は許可されていないページにリダイレクトされ、ユーザーが有効なときに実際のページにリダイレクトされます。

これが私のやり方です。ユーザーが有効で、権限のないページにリダイレクトしない場合は、アプリコンポーネントページをリダイレクトしません。

AuthorizationComponent.ts

import { Component, OnInit, OnDestroy, AfterViewInit } from '@angular/core'; 
import { Router } from "@angular/router"; 

@Component({ 
    selector: 'app-authorization', 
    templateUrl: './authorization.component.html', 
    styleUrls: ['./authorization.component.css'] 
}) 
export class AuthorizationComponent implements OnInit { 

    constructor(private router: Router) { } 

    ngOnInit() { 
    alert('auth component and redireting to /app') 
    // API Call goes here, 
    If(UserIsInValid) 
     this.router.navigate['/UnAuthorized'] 
    else 
     this.router.navigate['/app'] 

    } 

    ngOnDestroy() 
    { 
    alert('auth destroy') 
    } 

    ngAfterViewInit() 
    { 
    alert('auth after init')   
    } 

} 

AuthorizationComponent.html

<router-outlet></router-outlet> 

app.component.ts

import { Component, OnInit, ViewChild } from '@angular/core'; 
import { Router, RouterModule } from '@angular/router'; 


@Component({ 
    selector: 'app-root', 
    templateUrl: './app.component.html', 
    styleUrls: ['./app.component.css'] 
}) 
export class AppComponent implements OnInit { 

constructor(private _router: Router) { 
    } 

    ngOnInit(): void {} 
    } 

app.component.html

<nav> 
     <a routerLink="/component-one">Component One</a> 
     <a routerLink="/component-two">Component Two</a> 
    </nav> 

    <router-outlet></router-outlet> 

私はapp.routing.ts

import { NgModule } from "@angular/core"; 
import { Routes, RouterModule } from "@angular/router"; 
import { FirstComponent } from './FirstComponent'; 
import { SecondComponent } from './SecondComponent'; 
import { AppComponent } from "./app.component"; 
import { ErrorComponent } from "./error.component"; 
import { AuthorizationComponent } from "./shared/authorization/authorization.component"; 

const routes: Routes = [ 
    { path: '', component: AuthorizationComponent, pathMatch: 'full' }, 
    { 
     path: 'app',component:AppComponent, 
     children: [ 
      {path:'', redirectTo:'First', pathMatch: 'full'}, 
      {path:'First', component: FirstComponent}, 
      {path:'Second', component: SecondComponent} 
      //{path:'', component: FirstComponent} 
     ] 
    }, 

    { path: 'NotFound', component: ErrorComponent }, 
    { path: 'Error', component: ErrorComponent }, 
    { path: 'UnAuthorized', component: ErrorComponent }, 
    { path: '**', redirectTo: 'NotFound' } 
]; 

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

export const routingComponents = [FirstComponent, SecondComponent]; 

app.module.ts

import { BrowserModule } from '@angular/platform-browser'; 
import { NgModule } from '@angular/core'; 
import { RouterModule } from '@angular/router'; 
import { AppComponent } from './app.component'; 
import { routingComponents, AppRoutingModule } from './app.routing'; 
import { AuthorizationComponent } from './shared/authorization/authorization.component'; 

@NgModule({ 
    declarations: [ 
    AppComponent, 
    routingComponents, 
    AuthorizationComponent 
    ], 
    imports: [ 
    BrowserModule, 
    AppRoutingModule  
    ], 
    providers: [ 

    ], 
    bootstrap: [AuthorizationComponent] 
}) 
export class AppModule { } 

Answer 1

を持っているあなたはCanActivate Guard

にあなたの小切手を移動する必要があります

@Injectable() 
export class AuthGuard implements CanActivate { 
    constructor(private router: Router){} 

    canActivate(): boolean { 
     if(UserIsInValid){ 
      // user is invalid. redirect to unauthorized route 
      this.router.navigate['/UnAuthorized']; 
      return; 
     } else { 
      // user is valid, continue to route 
      return true; 
     } 
    } 
} 

今、あなたは

const routes: Routes = [ 
    { 
     path: 'app',component:AppComponent, 
     canActivate: [ AuthGuard ], 
     children: [ 
      {path:'', redirectTo:'First', pathMatch: 'full'}, 
      {path:'First', component: FirstComponent}, 
      {path:'Second', component: SecondComponent} 
     ] 
    } 
] 

を保護する必要がある任意の経路にガードを取り付けることができ