错误 TS2345 Angular AngularFire2 检查用户是否为 Admin

Question

正在尝试使用最新版本的 Firebase 和 Angular。我试图实现的总体概念是管理员身份验证。我已经实现了登录注销功能。我已使用 UID 将 googleAuth 登录用户保存到数据库中。现在我要做的是将某些页面限制为登录和管理。因此，我已将 isAdmin: true 指定为存储在数据库中的用户对象中的值。基本上我想看看用户是否是管理员和路由器参数的 return true 或 false。我一直在断断续续地使用 Angular 和 Firebase。我会认为自己是初学者。我不太明白如何从 AngularFire2 4 -> AngularFire 5 迁移。我得到的当前错误是 TS2345:

ERROR in src/app/admin-auth-guard.service.ts(15,38): error TS2345: Argument of type '(user: User) => AngularFireObject<AppUser>' is not assignable to parameter of type '(value: User, index: number) => ObservableInput<{}>'.
  Type 'AngularFireObject<AppUser>' is not assignable to type 'ObservableInput<{}>'.
    Type 'AngularFireObject<AppUser>' is not assignable to type 'ArrayLike<{}>'.
      Property 'length' is missing in type 'AngularFireObject<AppUser>'.

根据我的理解，get 函数是 returning 一个对象，但错误是期待一个可观察的。我对 observables 的了解是你可以订阅它们并且你应该销毁它们...

我需要使用当前登录的用户 ID 来查询数据库和 return 匹配 uid 的用户对象，然后检查 isAdmin 是真还是假。然后 return 到路由参数，这样我就可以将页面限制为经过身份验证和管理员。

请指出正确的方向。

admin-auth-guard.service.ts

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
import { UserService } from './user.service';
import 'rxjs/add/operator/switchMap';
import 'rxjs/add/operator/map';
import { Observable } from 'rxjs/Observable';

@Injectable()
export class AdminAuthGuardService implements CanActivate {

  constructor(private auth: AuthService, private userService: UserService) { }

  canActivate(): Observable<boolean> {
    return this.auth.user$.switchMap(user => this.userService.get(user.uid)).map(appUser => appUser.isAdmin);
  }

}

user.service.ts

import { Injectable } from '@angular/core';
import { AngularFireDatabase, AngularFireObject } from 'angularfire2/database';
import * as firebase from 'firebase';
import { Observable } from 'rxjs/Observable';
import { AppUser } from './models/app-user';

@Injectable()
export class UserService {

  constructor(private db: AngularFireDatabase) { }

  save(user: firebase.User) {
    this.db.object('/users/' + user.uid).update({
      name: user.displayName,
      email: user.email
    });
  }

  get(uid: string): AngularFireObject<AppUser> {
    return this.db.object('/users/' + uid);
  }

}

这是我一直在使用的帮助：https://github.com/angular/angularfire2/blob/master/docs/version-5-upgrade.md

我不明白这些注释是如何对创建的函数起作用的。关于 "observable" 的引用，我假设这意味着这个 canActivate() 函数从 Observable 扩展并且应该 return 一个布尔值（true/false）。

感谢您的宝贵时间。

Answer 1

 get(uid: string): Observable<any> {
    return this.db.object('/users/' + uid).valueChanges();
 }

并且：

canActivate(): Observable<boolean> {
   return this.auth.user$.switchMap(user => 
   this.userService.get(user.uid)).map((appUser :any) => appUser.isAdmin);
}

有关详细信息，请参阅：info

Answer 2

就我而言，它有效。
AdminAuthGuard 服务。

import { Injectable } from '@angular/core';
import { CanActivate } from '@angular/router';
import { AuthService } from './auth.service';
import { map, switchMap } from 'rxjs/operators';
import { Observable } from 'rxjs';
import { UserService } from './user.service';
import * as firebase from 'firebase';

@Injectable()
export class AdminAuthGuard implements CanActivate {

  constructor(private auth: AuthService,
  private userService: UserService) {}

  canActivate(): Observable<boolean> {
    return this.auth.user$.pipe(switchMap((user: firebase.User) =>
      this.userService.get(user.uid)).
      map((appUser) => appUser.isAdmin));
   }

}

UserService.ts

 get(uid: string): Observable<any> {
    return this.db.object('/users/' + uid).valueChanges();
 }

Answer 3

AdminAuthGuard 服务。

 canActivate(): Observable<boolean> {
 return this.auth.user$
 .switchMap(user => this.userService.get(user.uid).valueChanges())
 .map(appUser => appUser.isAdmin);
 }

UserService.ts

get(uid:string):AngularFireObject<AppUsers>{
return this.db.object('/users/'+uid);
}

Answer 4

user.service.ts

get(uid: string): Observable<any> {
return this.db.object('/users/' + uid).valueChanges();
}

admin-auth-guard.service.ts

canActivate(): Observable<boolean> {
return this.auth.user$.pipe(switchMap(user => this.userService.get(user.uid).pipe(map((appUser: any) => appUser.isAdmin))));
}

Answer 5

"FirebaseObjectObservable" 将其替换为 "Observable" 并从 rxjs

导入

从'rxjs'导入{Observable}；

Answer 6

Admin-auth-guard.service.ts

canActivate(): Observable<boolean> {
     return this.auth.user$
    .pipe(switchMap(user=> {
        return this.userService.get(user.uid).valueChanges()
        }),
        map(appUser=> appUser.isAdmin));
  }


user.service.ts

get(uid: string): AngularFireObject<AppUser>{
    return this.db.object('/users/'+ uid);
  }

Answer 7

我只能通过这种方式使用 angular 8：

canActivate(): Observable<boolean> {
    return this.auth.user$.pipe(
        switchMap((user: firebase.User) =>
        this.userService.get(user.uid)
        .pipe(
          map((appUser) => appUser.isAdmin)
        )
      )
    )
  }

和UserService获取方法

get(uid: string): Observable<any> {
    return this.db.object('/users/' + uid).valueChanges();
}

Answer 8

admin-auth-guard.service.ts

canActivate(): Observable<boolean> {
    return this.auth.user$
    .pipe(switchMap(user=> this.userService.get(user.uid).valueChanges()),
    map(appUser=> appUser.isAdmin));
 }

user.service.ts

get(uid: string): AngularFireObject<AppUser>{
  return this.db.object('/users/'+ uid);
}

它可以像下面这样完成并且可以直接映射，因为两者都是 Observables。但 FirebaseObjectObservable 在 angular.

的最新版本中已弃用

get(uid: string): FirebaseObjectObservable<AppUser>{
      return this.db.object('/users/'+ uid);
    }

因此，当我们使用 AngularFireObject 时，我们必须执行 .valueChanges() 然后它将成为 return 一个可观察对象，以便我们可以 return 最终在 canActivate()

错误 TS2345 Angular AngularFire2 检查用户是否为 Admin

error TS2345 Angular AngularFire2 checking if user isAdmin

angularfire2

angular