Ионный 4 + HttpInterceptor + токен

Question

Я пытаюсь аутентифицировать все вызовы API для серверной части, используя HttpInterceptor в проекте Ionic 4. Токен сохраняется через NativeStorage. Проблема возникает при входе в систему. Поскольку доступного токена еще нет, NativeStorage возвращает ошибку, прерывающую цепочку: NativeStorageError {code: 2, source: "Native", исключение: null}

httpConfig.interceptor.ts

import {
  HttpRequest,
  HttpHandler,
  HttpEvent,
  HttpInterceptor,
  HttpResponse,
  HttpErrorResponse
} from '@angular/common/http';

import { Observable, throwError, from } from 'rxjs';
import { map, catchError, switchMap } from 'rxjs/operators';
import { Injectable } from '@angular/core';
import { LoadingController } from '@ionic/angular';
import { NativeStorage } from '@ionic-native/native-storage/ngx';

const TOKEN_KEY = 'auth-token';

@Injectable()
export class HttpConfigInterceptor implements HttpInterceptor {
  loaderToShow: any;
  loadingPresent = false;
  debug = false;
  constructor(
    public loadingController: LoadingController,
    private storage: NativeStorage
  )
  { }

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

      return from(this.storage.getItem(TOKEN_KEY))
        .pipe(
          switchMap(token => {
            if (token) {
                request = request.clone({ headers: request.headers.set('Authorization', 'Bearer ' + token.access_token) });
            }
            if (!request.headers.has('Content-Type')) {
              request = request.clone({ headers: request.headers.set('Content-Type', 'application/json') });
            }

            this.showLoader();

            return next.handle(request).pipe(

              map((event: HttpEvent<any>) => {
                if (event instanceof HttpResponse) {
                  console.log('event--->>>', event);
                }
                this.hideLoader();
                return event;
              }),
              catchError((error: HttpErrorResponse) => {
                this.hideLoader();
                return throwError(error);
              })
            );

          })
        );
  }

  showLoader() {
    console.log("show loader");
    this.loaderToShow = this.loadingController.create({
      message: 'Cargando datos...'
    }).then((res) => {

      this.loadingPresent = true;
      res.present();

      res.onDidDismiss().then((dis) => {
        console.log('Loading dismissed!');
      });
    });
  }

  hideLoader() {
    if(this.loadingPresent) {
      this.loadingController.dismiss();
      this.loadingPresent = false;
    }
  }
}

auth.service.ts

import { HttpClient, HttpHeaders } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { Platform } from '@ionic/angular';
import { tap, map } from 'rxjs/operators';
import { NativeStorage } from '@ionic-native/native-storage/ngx';
import { environment } from '../../environments/environment';
import { User } from '../models/user';
import { BehaviorSubject } from 'rxjs';

const TOKEN_KEY = 'auth-token';

@Injectable({
  providedIn: 'root'
})

export class AuthService {
  isLoggedIn = false;
  token:any;

  authenticationState = new BehaviorSubject(false);

  constructor(
    private http: HttpClient,
    private storage: NativeStorage,
    private plt: Platform
  )
  {
    this.plt.ready().then(() => {
      this.checkToken();
    });
  }

  login(login: String, password: String) {
    return this.http.post(environment.API_URL + 'auth/login',
      { login: login, password: password }
    ).pipe(
        map(token => {
          this.storage.setItem(TOKEN_KEY, token)
          .then(
            () => {
              this.authenticationState.next(true);
            },
            error => console.error('Error storing item', error)
          );
        }),
    );
  }

  logout() {
    return this.http.get(environment.API_URL + 'auth/logout')
    .pipe(
      tap(data => {
        return this.storage.remove(TOKEN_KEY).then(() => {
          this.authenticationState.next(false);
        });
      })
    )
  }

  isAuthenticated() {
    return this.authenticationState.value;
  }


  checkToken() {
    this.storage.getItem(TOKEN_KEY).then(res => {
      if (res) {
        this.authenticationState.next(true);
      }
    });
  }
}

Когда я пытаюсь войти в систему в первый раз, NativeStorage возвращает ошибку «token not found» от перехватчика NativeStorageError {code: 2, source: «Native»", исключение: ноль}

Answer 1

вы пытаетесь получить доступ к элементу 'TOKEN_KEY', когда элемент не существует.

intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
   return from(this.storage.getItem(TOKEN_KEY)) <-- //This causes error

или

checkToken() {
  this.storage.getItem(TOKEN_KEY).then(res => { <-- //This causes error
    if (res) {
       this.authenticationState.next(true);
    }
  });
}

Вы должны инициализировать значение по умолчанию для 'TOKEN_KEY' или добавить, если еще условие для управления (проверки) токена

, вы можете использовать this.storage.keys список для поиска вашего ключа

другие коды ошибок:

• NATIVE_WRITE_FAILED = 1
• ITEM_NOT_FOUND = 2
• NULL_REFERENCE= 3
• UNDEFINED_TYPE = 4
• JSON_ERROR = 5
• WRONG_PARAMETER = 6