Угловое 2, Keycloak: обеспечение определенные маршруты

Question

У меня Угловое 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

Вот мое решение, надеюсь, что это будет полезно для кого-то:

1. Удалить от main.ts keycloak инициализации и boostrap 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

Вы можете использовать гвардию для маршрутов, я имеют следующую реализацию:

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 аналогично.

Я надеюсь быть полезным.