角度2、キークローキング：特定のルートを確保する

Question

私は角2を確保しました。鍵クローコ、例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

ここでは、それが誰かのために役立つことを願って、私のソリューションです：

1. 削除main.ts keycloak初期化とブートストラップAppModuleからいつものように：

   if (environment.production) { 
       enableProdMode(); 
   } 
   
   platformBrowserDynamic().bootstrapModule(AppModule); 
   

2. でapp.component.ts追加：あなたのルートのガードを使用することができます

   import { Router, NavigationStart } from '@angular/router'; 
   ... 
   
   constructor(private router: Router) { 
       router.events.forEach(element => { 
        if (element instanceof NavigationStart && 
        (element.url === '/secure-route-1' || 
         element.url === '/secure-route-2')) { 
   
        if (!KeycloakService.auth.loggedIn) { 
         KeycloakService.init() 
          .then(() => {}) 
          .catch(() => window.location.reload()); 
         } 
        } 
       }); 
   } 
   

Answer 2

、I次の実装：

app.routes.ts：

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

ホームは保護されたルートであり、その他は無料でアクセスできます。

の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似ています。

私は役に立ちそうです。