为什么我不能使用 AuthGuard 的异步获取存储的价值？

Question

我正在尝试在我的 Ionic 4 应用程序中进行非常简单的登录。当用户登录时，我在存储中设置了一个令牌。这是有效的。

我正在使用 Auth Guard 检查应用程序中的一个页面，因此如果在存储中设置了令牌，用户就可以查看该页面。否则他们将被重定向到登录页面。

我的问题是我完全陷入了异步地狱；我只是想不通。我正在尝试做一个简单的检查：是否在存储中设置了令牌。如果是，return 是，如果不是，return 是假。

我遇到的问题是，即使在成功登录并存储令牌后，当我尝试访问受限页面时，我仍然会被重定向到登录页面；我假设这是因为在我的守卫中没有正确使用异步。

我做错了什么？

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;
    });
  }
}

为什么我不能使用 AuthGuard 的异步获取存储的价值？

Why can't I get the value of storage using async for AuthGuard?

ionic-framework

angular

ionic4