Angular 2， key 斗篷 : securing certain routes

Question

我有 Angular 2 应用程序，由 Keycloak 保护，通过示例完成 here 。

我想知道，如何才能确保某些路线的安全。

main.ts:

 KeycloakService.init()
 .then(() => {
   const platform = platformBrowserDynamic();
   platform.bootstrapModule(AppModule);
 })
 .catch(() => window.location.reload());

keycloak.service.ts:

@Injectable()
export class KeycloakService {

  static auth: any = {};

  static loginUser: KeycloakUser;

  static init(): Promise<any> {

  let keycloakAuth: Keycloak.KeycloakInstance = Keycloak('keycloak/keycloak.json');

  KeycloakService.auth.loggedIn = false;

  return new Promise((resolve, reject) => {
    keycloakAuth.init({ onLoad: 'login-required' })
    .success(() => {
      KeycloakService.auth.loggedIn = true;
      KeycloakService.auth.authz = keycloakAuth;

      KeycloakService.auth.logoutUrl = keycloakAuth.authServerUrl + "/realms/demo/protocol/openid-connect/logout?redirect_uri=/angular2-product/index.html";
      resolve();
    })
    .error(() => {
      reject();
    });
   });
 }
 ....

Answer 1

您可以为您的路线使用守卫，我有下一个实现:

app.routes.ts:

export const rs: Routes = [
  { path: 'home',  component: PersonAppComponent, canActivate: [AuthGuard] },
  { path: 'other',  component: LoginComponent },
];

首页是 protected 路线，其他路线可以免费访问。

auth-guard.ts:

@Injectable()
export class AuthGuard implements CanActivate,OnInit {

  constructor(private ck: KeycloakService) {
    console.log("INIT AuthGuard: " + KeycloakService.auth.loggedIn )
  }

  ngOnInit() {

  }

  canActivate() {
    console.log("check guard: " + KeycloakService.auth.loggedIn)
    return KeycloakService.auth.loggedIn;
  }

}

我的 main.ts 是类似的。

希望对您有所帮助。