如何在 canActivate 中调用异步方法 |离子 ,Angular

Question

我想获得一个令牌来验证用户。我用 import { Storage } from '@ionic/storage-angular'; 保存数据问题是 Storage 方法只能在 async 模式下工作。

这是存储服务

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

@Injectable({
  providedIn: 'root'
})
export class StorageService {

  private _storage: Storage | null = null;

  constructor(private storage: Storage) {
  }

  public async init() {
    const storage = await this.storage.create();
    this._storage = storage;
  }


  public async set(key: string, value: any): Promise<void> {
    const data = await this._storage?.set(key, value);
  }

  public async get(key: string): Promise<any> {
    return data await this._storage?.get(key);
  }

  public async remove(key: string): Promise<void> {
    await this._storage?.remove(key);
  }

我在ngOnInit AppComponent

中调用方法init()初始化数据库

这是Guard

import { Injectable } from '@angular/core';
import { ActivatedRouteSnapshot, CanActivate, Router, RouterStateSnapshot, UrlTree } from '@angular/router';
import { Observable } from 'rxjs';
import { StorageService } from '../services/storage.service';

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

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


  canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): boolean | UrlTree | Observable<boolean | UrlTree> {

    const data = this.storage.get('token');

    if (!data) {
      this.router.navigateByUrl('/login');
    }
    else {
      return true;
    }
  }

}

Answer 1

像这样更改您的函数：

  async canActivate(
    route: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Promise<boolean> {

    const data = await this.storage.get('token');

    if (!data) {
      this.router.navigateByUrl('/login');
      return false;
    }
    else {
      return true;
    }
  }

如何在 canActivate 中调用异步方法 |离子 ,Angular

How to call an async method in canActivate | Ionic ,Angular

typescript

ionic-framework

canactivate

angular