Question

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

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

我的问题是我完全陷入了异步地狱。我只是想不通。我正在尝试做一个简单的检查：是否在存储中设置了令牌。如果是，则返回true，否则返回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 {

    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的异步功能获得存储的价值？

1 个答案: