Как выйти, когда токен истекает в ionic3?

Question

Когда пользователь входит в систему, на следующий день он сохраняет кеши и показывает разрушенное приложение.Как мы можем перенаправить пользователя на страницу входа после истечения срока действия его токена?Мы используем JWT с ионным 3 на основе Angular 6. Вот код:

Token service (provider)

import { Injectable } from '@angular/core';
import { Storage } from '@ionic/storage';

@Injectable()
export class TokenProvider {
  constructor(private storage: Storage) { }

  SetToken(token) {
    return this.storage.set('auth-token', token);
  }

  async GetToken() {
    return await this.storage.get('auth-token');
  }

  DeleteToken() {
    this.storage.remove('auth-token');
  }

  async GetPayload() {
    const token = await this.storage.get('auth-token');
    let payload;
    if (token) {
      payload = token.split('.')[1];
      payload = JSON.parse(window.atob(payload));
    }

    return payload.data;
  }
}

Перехватчик

import { switchMap } from 'rxjs/operators';
import { TokenProvider } from './token/token';
import { Observable } from 'rxjs/Observable';
import { fromPromise } from 'rxjs/observable/fromPromise';
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private tokenProvider: TokenProvider) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return fromPromise(this.tokenProvider.GetToken()).pipe(
      switchMap(token => {
        const headersConfig = {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        };
        if (token) {
          headersConfig['Authorization'] = `beader ${token}`;
        }
        const _req = req.clone({ setHeaders: headersConfig });
        return next.handle(_req);
      })
    );
  }
}

компонент приложения:

 this.storage.get('auth-token').then(token => {
        if (token) {
          this.tokenProvider.GetPayload().then(data => {
            const params = {
              room: 'global',
              user: data.username
            };
            this.socket.emit('online', params);
          });
          this.nav.setRoot('TabsPage');
        } else {
          this.nav.setRoot('LoginPage');
        }
      });
    });
  }

Но, похоже, все еще не работает.Когда токен истекает, он по-прежнему сохраняет страницу активной без каких-либо данных, выглядит как разрушенное приложение.Как мы можем исправить эту проблему и перенаправить пользователя на страницу входа в систему?

Answer 1

Два способа справиться с истечением срока действия токена:

1. В Interceptor, вы можете получить коды ошибок в блоке ошибок.

import { switchMap } from 'rxjs/operators';
import { TokenProvider } from './token/token';
import { Observable } from 'rxjs/Observable';
import { fromPromise } from 'rxjs/observable/fromPromise';
import { Injectable } from '@angular/core';
import {
  HttpInterceptor,
  HttpRequest,
  HttpHandler,
  HttpEvent
} from '@angular/common/http';

@Injectable()
export class TokenInterceptor implements HttpInterceptor {
  constructor(private tokenProvider: TokenProvider) {}

  intercept(
    req: HttpRequest<any>,
    next: HttpHandler
  ): Observable<HttpEvent<any>> {
    return fromPromise(this.tokenProvider.GetToken()).pipe(
      switchMap(token => {
        const headersConfig = {
          'Content-Type': 'application/json',
          Accept: 'application/json'
        };
        if (token) {
          headersConfig['Authorization'] = `beader ${token}`;
        }
        const _req = req.clone({ setHeaders: headersConfig });
        return next.handle(_req).do((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
        // do stuff with response if you want
      }
    }, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 401) {
          // redirect to the login route
          // or show a modal
        }
      }
    });
      })
    );
  }
}

Вы можете добавить AuthGuard, CanActivate в маршрут для проверки аутентификации токена.

import { Injectable } from '@angular/core';
import { Router, CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuardService implements CanActivate {
  constructor(public auth: AuthService, public router: Router) {}
  canActivate(): boolean {
    if (!this.auth.isAuthenticated()) {
      this.router.navigate(['login']);
      return false;
    }
    return true;
  }
}

Answer 2

Используйте событие в этом случае.Опубликуйте событие, когда запрос на вход в систему получит ошибку в виде истекшего токена или недействительные учетные данные и подпишитесь на app.component.ts, где вы можете установить страницу входа в качестве корневой страницы.