Почему я не могу получить значение хранилища, используя async для AuthGuard?

Question

Я пытаюсь сделать очень простой вход в мое приложение Ionic 4. Когда пользователь входит в систему, я устанавливаю токен в хранилище. Это работает.

Я использую Auth Guard для проверки одной страницы в приложении, поэтому, если токен установлен в хранилище, пользователь может просматривать страницу. В противном случае они будут перенаправлены на страницу входа.

Моя проблема в том, что я полностью застрял в асинхронном аду;Я просто не могу понять это. Я пытаюсь сделать простую проверку: токен установлен в хранилище или нет. если да, верните true, если нет, верните false.

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

Что я делаю не так?

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

@Injectable({
    providedIn: 'root'
})
export class AuthGuard implements CanActivate {

    authenticated: boolean;

    constructor(
        private router: Router,
        private storage: Storage
    ) {
        this.getToken();
    }

    canActivate(route: ActivatedRouteSnapshot): boolean {

        if (this.authenticated) {
            return true;
        }

        this.router.navigate(['/login']);
        return false;
    }

    async getToken() {
        await this.storage.get('token').then(res => {
            if (res) {
                this.authenticated = true;
            } else {
                this.authenticated = false;
            }
        });
    }
}

Answer 1

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

Попробуйте этот код -

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

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {

  constructor(
    private router: Router,
    private storage: Storage
  ) {
  }

  canActivate(route: ActivatedRouteSnapshot): Promise<boolean> {

    return this.storage.get('token').then(res => {
      if (res) {
        return true;
      }

      this.router.navigate(['/login']);
      return false;
    });
  }
}