각도 4 : Observable not working

Question

나는 완벽하게 작동하는 Angular 2+에 대해 adal.js 포트를 통해 Azure Active Directory 인증을 구현합니다.

Google은 AdalService과의 통화를 처리하는 AuthenticationGuard을 보유하고 있습니다. AdalService에는 사용자가 로그인했는지 여부를 확인하는 기능인 ensureAuthenticatedAsync이 있으며, 그렇지 않은 경우 AD 로그인 페이지로 리디렉션됩니다.

AD 계정을 사용할 수없는 경우를 제외하고 사용자 지정 생성 토큰을 사용하여 로그인 할 수있는 새로운 요구 사항이 추가되었습니다. 일부 수정 후, 내 코드는 다음과 같습니다

authentication.guard.ts

public canActivate(route: ActivatedRouteSnapshot, state RouterStateSnapshot) : boolean { 
    ... 
    let params = route.queryParams; 
    let token = (params !== null && params['token'] !== undefined) ? params['token'] : null; 

    this.adalService.ensureAuthenticatedAsync(token); 
    ... 
    return true; 
} 

adal.service.ts

private context: adal.AuthenticationContext; 

public ensureAuthenticatedAsync(token: string | null = null) { 
    console.log('ensureAuthenticatedAsync', token); 
    this.isAuthenticated.subscribe(isAuthenticated => { 
     if (!isAuthenticated) { 
      console.log('not authenticated); 
      if (token === null) { 
       // forward to AAD login page -> this works perfectly 
       this.context.login(); 
      } else { 
       ... 
       console.log('accessToken before', this.accessToken); 
       this.customToken = token; 
       console.log('accessToken after', this.accessToken); 
       ... 
      } 
     } 
    }); 
} 

public get accessToken(): string { 
    console.log('customToken in get accessToken', this.customToken); 
    return (this.customToken === null) ? this.context.getCachedToken(this.adalClientId) : this.customToken; 
} 

public get isAuthenticated(): Observable<boolean> { 
    console.log('accessToken in get isAuthenticated', this.accessToken); 
    let isAuthenticated: boolean = (this.accessToken !== null); 
    return Observable.of(isAuthenticated); 
} 

app.component.ts

public ngOnInit(): void { 
    this.adalService.isAuthenticated.subscribe(isAuthenticated => { 
     if (isAuthenticated) { 
      // do some stuff here 
     } 
    }); 
} 

012 3,516,

app.routes.ts

export const ROUTES: Routes = [ 
    { path: 'Dashboard', component: DashboardComponent, canActivate: [AuthenticationGuard] }, 
    { path: 'Access-Denied', component: AccessDeniedComponent } 
]; 

이 콘솔에 로그인 무슨이다 :

authentication guard 
customToken in get accessToken null 
accessToken in get isAuthenticated null 
customToken in get accessToken null 
ensureAuthenticatedAsync 12345 
not authenticated 
customToken in get accessToken null 
accessToken before null 
customToken in get accessToken 12345 
accessToken after 12345 
customToken in get accessToken 12345 

정기적으로 페이지를 액세스은 (http://localhost:3000/Dashboard)가 제대로 후 AD 로그인 페이지로 리디렉션을 트리거 로그인 후 내 응용 프로그램으로 돌아갑니다. 거기에서 캐싱 된 AD 토큰이 변경되고 isAuthenticated가 가입 된 곳에서 트리거됩니다 (내 경우 app.component.ts).

그러나 토큰 (http://localhost:3000/Dashboard/?token=12345)을 사용하여 페이지에 액세스하는 것은 작동하지 않습니다. customToken이 param의 값으로 수정 되더라도 변경 내용이 전파되지 않고 isAuthenticated가 구독에 false으로 유지됩니다.

내가 뭔가를 놓쳤습니까?

Answer 1

나는 문제가 가드 현지화에 대해 생각합니다.

가드가/Dashboard 경로에 있습니다. 따라서 http://localhost:3000/?token=12345 만로드하면 AuthenticationGuard가 호출되지 않으므로 AuthenticateAsync가 호출되지 않습니다. 따라서 리디렉션이없고 adal.service.ts에서 customToken을 업데이트하지 않았습니다.

당신이 appComponent에 보호 당신이 appComponent

편집에 "선도"경로에 가드를 사용해야 계산 된 결과를 사용하려면

: 문제는 당신이 반응 행동을 오해하고 있다는 것입니다. isAuthenticated가 구현되면 그것은 한 번 부울을 내 보낸 다음 완료합니다. 따라서 app.component의 구독은 한 번만 실행됩니다.

당신이 찾고있는 것은 필요에 따라 또는 customToken이 변경 될 때 새로운 데이터를 "밀어 넣을"수있는 주제입니다.

Answer 2

보십시오 : 당신의 adal.service.ts에서

:

import { Observable } from 'rxjs/Observable'; 
import { of } from 'rxjs/observable/of'; 
... 
public get isAuthenticated(): Observable<boolean> { 
let isAuthenticated: boolean = (this.accessToken !== null); 
return of(isAuthenticated); 
}