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，因为它需要令牌并且令牌的日期到期，所以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()将用户重定向到当前网址，如下所示：

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

我只能想到将currentUrl传递给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);
            }
          );
      }
}

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

3 个答案: