angular guard-service 注入服务

Question

我需要在守卫中注入一个服务。这个守卫检查用户是否被邀请，如果是，他可以访问该路由。

为了检查这个条件，我需要调用一个从数据库中获取这个信息的服务。

我有一个循环依赖错误，我明白我们不应该在 Guards 中注入服务，但在这种情况下，我需要这样做：

  providers: [AuthService, HackService, HacksStorageService, AuthGuard, EmailGuard],

还有守卫：

import { ActivatedRouteSnapshot, RouterStateSnapshot, CanActivate } from "../../../node_modules/@angular/router";
import { HacksStorageService } from "../shared/hacks-storage.service";

export class EmailGuard implements CanActivate {

  constructor(
    private hacksStorageService: HacksStorageService,
  ) {}

  canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
    this.hacksStorageService.fetchHack();
    // check if user was invited. should be in the participants array
    return true;
  }
}

我很困惑。通常我使用守卫来查看用户是否登录，所以我通常从 firebase 导入东西，而不是从我自己的服务，所以不是循环依赖。

现在我想根据我自己的数据检查条件是否发生。如果因为循环依赖而不允许我注入服务，我如何在EmailGuard中注入我自己的数据？

谢谢。

Answer 1

你可以在守卫中注入服务。如果您的服务 return 是同步的，那么您可以立即 return ，就像在您的示例代码中一样。否则，我是这样做的（使用 firebase auth）

import { Injectable } from '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
import { Observable, of } from 'rxjs';
import { map, first } from 'rxjs/operators';
import { AngularFireAuth } from '@angular/fire/auth';
import { Paths } from './paths';

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

  constructor(private afAuth: AngularFireAuth, private router: Router) { }

  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> | boolean {
      return this.afAuth.user.pipe(
        first(),
        map(user => {
          if (user) {
            this.router.navigate([Paths.MAIN_PATH]);
            return false;
          } else {
            return true;
          }
        })
      );
  }
}

angular guard-service 注入服务

angular guard-service inject service

service

guard

angular