Есть ли способ перенаправить на URL-адрес в angular 6/7 и заставить его закрыть любые открытые модальные окна или просто заменить всю страницу новым URL-адресом?

Причина: у меня есть перехватчик, который проверял токен / токен обновления через серверный API, и если он определяет токен И обновление больше недействительно, ему необходимо перенаправить пользователя на страницу входа. Все это прекрасно работает, если пользователь находится на «странице». если пользователь находится в модальном окне, например. модальное всплывающее окно редактирования и запрос к API запускает перехватчик для перенаправления, страница действительно перенаправляет на страницу входа в систему, но модальное окно все еще находится наверху.

Есть ли способ заставить перенаправление отображать новую страницу, которая закрывает все открытые модальные окна? У меня нет ссылки на модал от перехватчика.

Я пробую одно из этих:

This.router.navigateByUrl ('/ аккаунт / логин');

А также

This.navCtrl.navigateRoot ('/ account / login');

И ни закрыть модальное окно, ни заменить всю страницу.

Спасибо

Роуи.

Класс перехватчика:

import { HttpInterceptor, HttpRequest, HttpHandler, HttpUserEvent, HttpEvent, HttpHeaders, HttpErrorResponse } from "@angular/common/http";
import { Observable, BehaviorSubject, throwError } from "rxjs";
import { switchMap, filter, take, catchError } from 'rxjs/operators';
import { Injectable, Injector } from "@angular/core";
import { Router } from "@angular/router";
import { NavController } from "@ionic/angular";
import { AuthService } from "./auth.service";


@Injectable()
export class AuthInterceptor implements HttpInterceptor {

    private isRefreshing = false;
    private refreshTokenSubject: BehaviorSubject<any> = new BehaviorSubject<any>(null);

    constructor(private router: Router, private navCtrl: NavController, private inj: Injector) { }

    intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

        let authSrv = this.inj.get(AuthService);

        if (authSrv.AccessToken) {
            request = this.addToken(request, authSrv.AccessToken);
        }
        return next.handle(request).pipe(catchError(error => {
            if (error instanceof HttpErrorResponse) {
                switch (error.status) {
                    case 400:
                        return this.handle400Error(error);
                    case 401:
                        return this.handle401Error(request, next);
                    case 403:
                        return this.handle403Error(error);
                }
            }
            else {
                return throwError(error);
            }
        }));
    };

    private addToken(request: HttpRequest<any>, token: string) {
        let authSrv = this.inj.get(AuthService);
        return request.clone({
            setHeaders: {
                'Authorization': 'Bearer ' + authSrv.AccessToken
            }
        });
    }

    private handle400Error(error) {
        this.isRefreshing = false;
        if (error && error.status === 400 && error.error && error.error.error === 'invalid_grant') {
            // If we get a 400 and the error message is 'invalid_grant', the token is no longer valid so logout.
            let authSrv = this.inj.get(AuthService);
            authSrv.logout();
            this.router.navigateByUrl('/account/login');

        }
        return throwError(error);
    }

    private handle403Error(error) {
        //Forbidden - tried to load something not allowed - log the user out
        this.isRefreshing = false;
        let authSrv = this.inj.get(AuthService);
        authSrv.logout();
        this.router.navigateByUrl('/account/login');

        return throwError(error);
    }

    private handle401Error(request: HttpRequest<any>, next: HttpHandler) {

        if (!this.isRefreshing) {

            console.log('Refreshing token');

            this.isRefreshing = true;
            this.refreshTokenSubject.next(null);

            let authSrv = this.inj.get(AuthService);
            return authSrv.refrehToken().pipe(
                switchMap((token: any) => {
                    this.isRefreshing = false;
                    this.refreshTokenSubject.next(token.access_token);
                    console.log('Refreshing token - complete');
                    return next.handle(this.addToken(request, token.access_token));
                })
            )

        } else {
            return this.refreshTokenSubject.pipe(
                filter(token => token != null),
                take(1),
                switchMap(jwt => {
                    return next.handle(this.addToken(request, jwt));
                })
            )
        }
    }

}
-2
Rowie 10 Мар 2019 в 16:48

1 ответ

Лучший ответ

Я нашел способ решения моей проблемы, если он поможет кому-то еще с той же проблемой. Это значит перенаправить, чтобы сказать страницу входа и для этого перенаправления принудительно закрыть любые модальные объекты: не очень красиво, но у меня это работает:

В моем классе Interceptor, где мне нужно заставить пользователя перейти на страницу входа, я создал метод closeModals, который просто находит все ионно-модальные объекты и удаляет их из DOM перед перенаправлением.

Счастливые дни.

private closeModals(){
    var modals = document.getElementsByTagName("ion-modal");
    [].forEach.call(modals, function (el:any) {
        el.parentNode.removeChild(el);
    });
}
0
Rowie 16 Мар 2019 в 09:44