Angular 4 Неявный обратный вызов и защита маршрутизатора
Каков наилучший способ обработки неявного потока Callback в Angular 4? Я хочу, чтобы Guard подождал, пока пользователь будет перенаправлен обратно с токеном, и он будет сохранен до того, как Guard вернет true или false. Я получаю маршрут Access Denied в течение нескольких секунд, прежде чем перенаправлять обратно, чтобы проверить токен. Есть ли лучший способ обработать AuthGuard, чем то, что я делаю, поэтому я не получаю отказ в доступе до завершения проверки подлинности?
Как заставить сторожа маршрутизатора ждать перенаправления?
AppComponent
ngOnInit() {
//if there is a hash then the user is being redirected from the AuthServer with url params
if (window.location.hash && !this.authService.isUserLoggedIn()) {
//check the url hash
this.authService.authorizeCallback();
}
else if (!this.authService.isUserLoggedIn()) {
//try to authorize user if they aren't login
this.authService.tryAuthorize();
}
}
AuthSerivce
tryAuthorize() {
//redirect to open id connect /authorize endpoint
window.location.href = this.authConfigService.getSignInEndpoint();
}
authorizeCallback() {
let hash = window.location.hash.substr(1);
let result: any = hash.split('&').reduce(function (result: any, item: string) {
let parts = item.split('=');
result[parts[0]] = parts[1];
return result;
}, {});
if (result.error && result.error == 'access_denied') {
this.navigationService.AccessDenied();
}
else {
this.validateToken(result);
}
}
isUserLoggedIn(): boolean {
let token = this.getAccessToken();
//check if there is a token
if(token === undefined || token === null || token.trim() === '' )
{
//no token or token is expired;
return false;
}
return true;
}
getAccessToken(): string {
let token = <string>this.storageService.get(this.accessTokenKey);
if(token === undefined || token === null || token.trim() === '' )
{
return '';
}
return token;
}
resetAuthToken() {
this.storageService.store(this.accessTokenKey, '');
}
validateToken(tokenResults: any) {
//TODO: add other validations
//reset the token
this.resetAuthToken();
if (tokenResults && tokenResults.access_token) {
//store the token
this.storageService.store(this.accessTokenKey, tokenResults.access_token);
//navigate to clear the query string parameters
this.navigationService.Home();
}
else {
//navigate to Access Denied
this.navigationService.AccessDenied();
}
}
}
AuthGuard
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
var hasAccess = this.authService.isUserLoggedIn();
if(!hasAccess)
{
this.naviationService.AccessDenied();
return false;
}
return true;
}
Ответы
Ответ 1
Если вы хотите, чтобы ваш охранник подождал асинхронную задачу, вам нужно изменить свой AuthService, чтобы вернуть наблюдаемое и испускающее значение, которое вам нужно в асинхронной задаче, которую вы хотите подождать, в вашем случае ее reduce(). После этого сделайте подписку в охраннике. Таким образом, вы можете заставить своего охранника ждать какой-либо асинхронной задачи.
AuthGuard
canActivate(next: ActivatedRouteSnapshot, state: RouterStateSnapshot){
this.authService.isUserLoggedIn().map(logged => {
if (logged) {
return true;
} else {
this.naviationService.AccessDenied();
return false;
}
}).catch(() => {
this.naviationService.AccessDenied();
return Observable.of(false);
});
}
}
часть AuthService
isUserLoggedIn(): Observable<boolean> {
return new Observable((observer) => {
let hash = window.location.hash.substr(1);
let result: any = hash.split('&').reduce(function (result: any, item: string) {
let parts = item.split('=');
result[parts[0]] = parts[1];
if (result.error && result.error == 'access_denied') {
observer.next(false);
observer.complete();
}
else {
this.validateToken(result);
}
let token = this.getAccessToken();
//check if there is a token
if(token === undefined || token === null || token.trim() === '' )
{
//no token or token is expired;
observer.next(false);
observer.complete();
}
observer.next(true);
observer.complete();
}, {});
});
}
Ответ 2
Метод CanActivate
может вернуть Observable
, Promise
или Boolean
, а Angular будет знать, чтобы развернуть его и обработать все async. Вы можете изменить свой код, чтобы проверить необходимые данные, прежде чем возвращать завершенный/неудачный Observable
или разрешенный/отклоненный Promise
к маршрутизатору Angular и вызывая this.naviationService.AccessDenied()
в результате этой асинхронной функции.