如何在Canactivate中调用异步方法|离子，角

Question

我想获得一个令牌来验证用户。我从'@ionic/storage-angular'; 中保存了import {storege}的数据。问题是storege方法仅在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);
  }

我初始化数据库，调用方法init（） in ngoninit AppComponent

这是guard> 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;
    }
  }