使用 angular 6 和 firebase 保護管理路由

Question

我正在使用 Firebase 使用 Angular6。 我目前是 Angular 的新手。 我正在從 codewithmosh 學習 Mosh Hamedani。 但問題是我正在使用 angular6 和我在 Angular4 中觀看的教程。

現在我正在保護管理路由。 在 firebase 中定義了一些憑據。

如果用戶是管理員，我必須使用顯示和隱藏功能。

這是 firebase 中有關用戶的數據定義。

admin-auth-guard.service.ts

這是處理此 amdin-auth 文件時的錯誤。

auth.service.ts

用戶服務.ts

app-user.ts

Answer 1

如果顯示錯誤而不是像突出顯示那樣會更好。 無論如何，對於路線警衛來說，這就是我實現的目標。

在auth.service.ts中

export class AuthService {
  user$: Observable<AppUser>;
  constructor(private afAuth: AngularFireAuth, private db: AngularFireDatabase) 
 {
     this.user$ = this.afAuth.authState
      .pipe(switchMap(user_ => {
        if (user_) {
          return this.db.object(`users/${user_.uid}`).valueChanges();
        } else {
          return of(null);
        }
      }));
 }
}

這樣，每當您訂閱可觀察的用戶$時，您始終會從實時數據庫中獲得該用戶的對象。

之后，在admin-auth-guard.service.ts中 ：

constructor(private _auth: AuthService,
              private _router: Router) {
  }

canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | 
    Promise<boolean> | boolean {

    return this._auth.user$.pipe(
      take(1),
      map(user => user && user.admin),
      tap(isAdmin => {
        if (!isAdmin) {
          console.error('Access denied - Admins only');
// re-route to wherever you want 
          this.router.navigate(['login']); 
        }
      })
    );

  } 

希望這可以幫助。

Answer 2

您在user.service.ts中為仍使用角度實時數據庫所做的更改是可以的，您只需要更改canActivate方法即可... userService.get（user.uid）返回angularfireobject，您需要將其轉換為可觀察的通過調用.valueChanges（）。 就這樣。

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

    }

Answer 3

我認為這只是Typescript編譯時檢查，如果您運行應用程序並對其進行測試以查看控制台上的錯誤會更好，但是要解決此問題，您需要使用AppUser界面注釋appUser，如下所示：

 canActivate() {
    return this.afService.user$.pipe(
      switchMap(result => this.userService.get(result.uid)),
      map((userApp: AppUser) => userApp.isAdmin)
    );
  }

我還使用了回車鍵和花括號，因為它們只是一個箭頭功能，因為它們是無用的，所以這段代碼是相等的

switchMap(result => this.userService.get(result.uid))

這個代碼

switchMap(result => {
   return this.userService.get(result.uid)
})

但是我不太確定為什么switchMap中的（用戶）突出顯示，如果您發布錯誤消息，如果先前的答案沒有幫助，我可能會提供幫助。

Answer 4

我已經修改了您的方法，看看是否可行

首先在logout（）方法之后在auth.service.ts中添加如下方法

get appUser$() : Observable<AppUser> {
      return this.user$.pipe(switchMap(user => {
        if (user) return this.userService.get(user.uid).valueChanges();

        return of(null); 
      }))
}

然后在canActivate（）方法中進行更改

canActivate(): Observable<boolean> {
    return this.afService.appUser$
    .pipe(map (appUser => appUser.isAdmin));
}

只需在Angular 7中構建的Github My Github Link上注意我的項目即可。Angular 6項目將正常工作。

Answer 5

什么必須可以Activate返回？ 一個Observable ，對吧？

但是，您返回一個不是 Observable 的AngularFireObject 。

因此，在您的user.service.ts文件中，使用valueChanges()方法將返回一個Observable 。

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

在您的admin-auth-guard.service.ts文件中，

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

更好地理解： https : //forum.codewithmosh.com/d/1210-oshop-protecting-admin-routes-not-able-to-get-uid-from-firebase/20