[英]Angular2 route guard returning Observable<bool>, how to handle errors
我有一個像下面這樣的路線保護
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authenticationSvc: AuthenticationService) { }
canActivate(): Observable<boolean> {
return this.authenticationSvc.getAuthenticatedUser().map(
r => {
if (this.authenticationSvc.isAuthenticated()) {
// logged in so return true
return true;
}
this.router.navigateByUrl('/login');
return false;
})
}
問題是有時getAuthenticatedUser返回401,我有一個http攔截器來處理401並重定向到登錄頁面。 問題是這個.map永遠不會解析,因為http請求會拋出錯誤,並且角度路由器會卡在第一個路由請求上,無法處理來自攔截器的后續請求。 如何處理此錯誤並將Observable返回的解析為false並保持移動?
getAuthenticatedUser() {
let getUserObservable = this.http.get(ApiUrl + 'security/getAuthenticatedUser')
.map((res: any) => res.json())
.share()
//Get the result for the cache
getUserObservable.subscribe(
r => {
if (r.success) {
this.authenticatedUser = r.result.user;
}
});
//return the observable
return getUserObservable;
}
和http-intercepter下面
export class HttpInterceptor extends Http {
authSvc: AuthenticationService;
lastClicked: any = 0;
constructor(backend: ConnectionBackend, defaultOptions: RequestOptions, private _router: Router, private injector: Injector) {
super(backend, defaultOptions);
}
request(url: string | Request, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.request(url, options));
}
get(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.get(url, options));
}
post(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.post(url, body, this.getRequestOptionArgs(options)));
}
put(url: string, body: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.put(url, body, this.getRequestOptionArgs(options)));
}
delete(url: string, options?: RequestOptionsArgs): Observable<Response> {
return this.intercept(super.delete(url, options));
}
getRequestOptionArgs(options?: RequestOptionsArgs): RequestOptionsArgs {
if (options == null) {
options = new RequestOptions();
}
if (options.headers == null) {
options.headers = new Headers();
}
options.headers.append('Content-Type', 'application/json');
return options;
}
intercept(observable: Observable<Response>): Observable<Response> {
return observable.catch((err, source) => {
//If we get a 401 from the api that means out FormsAuthenticationTicket has expired, clear the auth cookie and navigate back to terms page
if (err.status == 401) {
this._router.navigateByUrl('/login');
}
return Observable.throw(err);
});
}
您可以捕獲錯誤並返回Observable<bool>
,如下所示:
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private router: Router, private authenticationSvc: AuthenticationService) { }
canActivate(): Observable<boolean> {
return this.authenticationSvc.getAuthenticatedUser().map(
r => {
if (this.authenticationSvc.isAuthenticated()) {
// logged in so return true
return true;
}
this.router.navigateByUrl('/login');
return false;
})
.catch((error: any) => {
this.router.navigateByUrl('/login');
return Observable.of(false);
});
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.