angular - Angular2 の @CanActivate 内の別のコンポーネントにリダイレクトする

Question

Angular2 の @CanActivate から別のコンポーネントにリダイレクトする方法はありますか?

Answer 1

ガードは簡単に注射可能であり、それ自体に注射可能を含めることができます。したがって、リダイレクトするために、単純にルーターを挿入できます。アプリ モジュールにプロバイダーとしてサービスを追加することを忘れないでください。

@Injectable()
export class AuthGuard implements CanActivate {

  constructor(private router: Router, private authService: AuthService) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> | boolean {
    if (!authService.isAuthenticated()) {
      this.router.navigate(['/login']);
      return false;
    }
    return true;
  }
}

export const ROUTES: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'protected', loadChildren: 'DashboardComponent', canActivate: [AuthGuard]}
];

Answer 2

UrlTreeAngular 7.1 以降、次の代わりに返すことができますboolean。

@Injectable({
  providedIn: 'root',
})
export class AuthGuard implements CanActivate {

  constructor(private authService: AuthService, private router: Router) { }

  canActivate(): boolean | UrlTree {
    return this.authService.isAuthenticated() || this.router.createUrlTree(['/login']);
  }
}