Ionic 4 / Angular 6 - страница перенаправления входа на 401/403 с использованием перехватчика - PullRequest
Новая
       12

Ionic 4 / Angular 6 - страница перенаправления входа на 401/403 с использованием перехватчика

0 голосов
/ 16 декабря 2018

Я разрабатываю Ionic 4 с Angular 6 PWA, и я немного застрял, используя перехватчик для перехвата запросов страниц 401/403.

Вот мой код перехватчика: 

import { HttpInterceptor, HttpRequest, HttpHandler, HttpUserEvent, HttpEvent } from "@angular/common/http";
import { Observable, empty } from "rxjs";
import { tap } from 'rxjs/operators';
import { Injectable } from "@angular/core";
import { Router } from "@angular/router";


@Injectable()
export class AuthInterceptor implements HttpInterceptor {

constructor(private router: Router) { }

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    if (req.headers.get('No-Auth') == "True") {
        return next.handle(req.clone());
    }

    if (localStorage.getItem('userToken') != null) {
        const clonedreq = req.clone({
            headers: req.headers.set("Authorization", "Bearer " + localStorage.getItem('userToken'))
        });

        return next.handle(clonedreq).pipe
        (
            tap(
                succ => { },
                err => {
                    if (err.status === 401 || err.status === 403){
                        localStorage.removeItem('userToken');
                        this.router.navigate(['/account/login']);
                        return empty();
                    }
                }
            )
        );
    }
    else {
        localStorage.removeItem('userToken');
        this.router.navigate(['/account/login']);
        return empty();
    }
}
}

Так что, похоже, это работает почти так, как требуется, так как он добавляет токен в запрос http, если он существует в LocalStorage, и мой WepAPI проверяет это по запросу.

Однако, если я вошел в систему иперейти на страницу, на которой мне нельзя (ошибка 403) или если я не вошел в систему и не зашел на защищенную страницу (401) - перехватчик перехватывает этот штраф, элемент localalstorage удаляется, и я перенаправляется на страницу входа,Это снова все в порядке.

Проблема в том, что страница, на которую я пытался перейти, например, Newsfeed, который бросил код состояния 401/403, теперь кэшируется в DOM.Так что теперь я нахожусь на странице входа в систему, я вхожу в систему нормально и перенаправляю обратно на страницу NewsFeed, но страница пустая, так как она не отображалась с данными, так как изначально она была заблокирована ошибкой 401/403.

Как удалить страницу из кэша DOM после успешного входа в систему перед перенаправлением.

Я устал: this.nav.navigateRoot ('/ newsfeed');но, похоже, он по-прежнему отображает пустую страницу новостной ленты.

файл auth.guard.ts 

import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Storage } from '@ionic/storage';

@Injectable()
export class AuthGuard implements CanActivate {
  constructor(private router : Router, private storage: Storage){}
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot):  boolean {
      if (localStorage.getItem('userToken') != null)
      {
        return true;
      }
      this.router.navigate(['/account/login']);
      return false;
  }
}

Любые идеи ???

Спасибо

1 Ответ

0 голосов
/ 17 декабря 2018

Боже мой, мой AuthGuard не стрелял по правильному маршруту.

Как только я исправил это, он работает как положено.

Спасибо

Роуи

...