出现401错误时如何将用户重定向到他要去的同一页面?

Question

我从 angular5 文档中获取这个截距函数。 我捕获了 401 错误低音请求返回 401 我需要召回他或以其他方式刷新他要去的页面。

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req)
.do(
event => {},
err => {
if (err instanceof HttpErrorResponse && err.status == 401) {
// handle 401 errors
this._events.publish('error:401');
}
});
}

我正在使用 anuglar5 和 ionic2+ ... 我同时提出了这堆请求：

const userSubscription = Observable
.forkJoin(
...[
this._userProvider.currentUser$.skipWhile((user: UserOrAnonymous) => user._profileType === ProfileType.ANONYMOUS).take(1),
this._lookupsProvider.lookups$.get(CONFIG.LOOKUPS.PROFILE_LOOKUP).take(1),
this._lookupsProvider.lookups$.get(CONFIG.LOOKUPS.TAGS).take(1),
this._Service.getEnrolledCoursesOfUser(),
this._Service.getEnrolledWebinarsOfUser()
]
)
.subscribe(
(res) => {
this.userProfile = res[0];
this._profileLookup = res[1];
this._tagsLookUp = res[2];
this.enrolledCoursesOfUser = res[3];
this.enrolledWebinarsOfUser = res[4];
if (this.userProfile['disabilityID']) {
this.disabilityObject = this._profileLookup.disabilities.filter(
(disability) => disability.id === this.userProfile['disabilityID']
)[0];
}
;
this.contentIsLoaded = true;
this.showForm = true;
},
() => {
this.contentIsLoaded = true;
this.showForm = false;
});
this._subscriptions.push(userSubscription);

当这个forkjoin执行时，这个函数this._ethraiService.getEnrolledCoursesOfUser()，返回401，因为它需要token并且令牌的日期到期，所以forkjoin将进入不成功的函数：

this.contentIsLoaded = true;
this.showForm = false;

因此，即使我自动登录该页面也永远不会出现，它也会出现一个空白页面，因为我说this.showForm = false隐藏了表单。

自动登录事件 ：

_events.subscribe('error:401',
() => {
this._loader = this._helperProvider.presentLoader();
this._authService.getCredentials()
.then(
credentials => {
if (credentials) {
this._authService.logIn(JSON.parse(credentials))
.subscribe(
() => {
this._loader.dismiss();
console.log('auto login success');
},
() => {
this.nav.push(LoginPage);
this._loader.dismiss();
}
);
}else{
this._loader.dismiss();
this.nav.push(LoginPage);
}
},
() => {
this._loader.dismiss();
this.nav.push(LoginPage);
}
);
})

forkjoin 函数位于用户想要导航到的配置文件页面中，但发生了 401 错误，因此因为 forkjoin 如果它有一个失败的请求，它将输入失败的函数而不是成功函数，并且失败消息隐藏了表单，我需要的是重新加载配置文件页面。

Answer 1

检索拦截器构造函数中的当前位置，如下所示：

constructor(private router: Router) {
this.currentUrl = this.router.url;
}

您可以使用window.location.replace()将用户重定向到当前 URL，如下所示：

window.location.replace(this.currentUrl)

或者只是使用window.location.reload()刷新页面。

Answer 2

好吧，您可以简单地重新加载页面

window.location.reload();

或者您可以获取实际的URL，然后导航到当前路由

constructor(private loc: Location, private router: Router) {
console.log(loc.path());
const fragments = loc.path().split('/');
fragments.shift();
router.navigate(...fragments);
}

Answer 3

我只能考虑将当前URL传递给autoLogin函数，并在自动登录成功后转到该URL，这是一个粗略的想法：

import 'rxjs/add/operator/map';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/observable/throw';
@Injectable()
export class AuthInterceptor implements HttpInterceptor {
intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
return next.handle(req)
.do((event: HttpEvent<any>) => {
if (event instanceof HttpResponse && event.status > 300) {
} else {
}
return event;
})
.catch((err: any, caught) => {
if (err instanceof HttpErrorResponse) {
if (err.status === 401) {
const currentUrl = window.location.href;
this.autoLogin(currentUrl);
}
return Observable.throw(err);
}
});
}
autoLogin(redirectUrl: string): void {
this._loader = this._helperProvider.presentLoader();
this._authService.getCredentials()
.then(
credentials => {
if (credentials) {
this._authService.logIn(JSON.parse(credentials))
.subscribe(
() => {
this._loader.dismiss();
console.log('auto login success');
window.location.href = redirecttUrl; // reload the page from where autologin was requested
},
() => {
this.nav.push(LoginPage);
this._loader.dismiss();
}
);
}else{
this._loader.dismiss();
this.nav.push(LoginPage);
}
},
() => {
this._loader.dismiss();
this.nav.push(LoginPage);
}
);
}
}