angular - 如何做路由器认证保护？变得可观察从 AngularFireAuth 然后转换为保护的布尔值

Question

我正在使用带有 AngularFireAuth 的路由器保护来检查用户是否可以输入路由。问题是，AngularFireAuth 返回一个<User>类型，而守卫需要一个<boolean>类型。

我在我的崇高文本中收到一条错误消息：'Type User is notassignable to type boolean'

---

我正在关注本教程：https ://angularfirebase.com/lessons/google-user-auth-with-firestore-custom-data/

我不知道如何将从 AngularFireAuth 类型检索到的转换为路由器保护。

这是auth.service

interface User {
  uid: string;
  email: string;
  photoURL?: string;
  displayName?: string;
  favoriteColor?: string;
}


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

  user: Observable<User>;

  constructor(
    private afAuth: AngularFireAuth,
    private afs: AngularFirestore,
    private router: Router
  ) {

      //// Get auth data, then get firestore user document || null
      this.user = this.afAuth.authState.pipe(
        switchMap(user => {
          if (user) {
            return this.afs.doc<User>(`users/${user.uid}`).valueChanges()
          } else {
            return of(null)
          }
        })
      )
    }

这是auth.guard

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

      return this.auth.user.pipe()
           take(1),
           map(user => !!user),
           tap(loggedIn => {
             if (!loggedIn) {
               console.log('access denied')
               this.router.navigate(['/login']);
             }
         })
    )

错误'Type User is not assignable to type boolean'来自return this.auth.user.pipe(). 在auth.guard

任何帮助，将不胜感激。

谢谢。

标签： angularionic-frameworkrxjs

Answer 1

啊..我刚看到那个博客的评论部分。

那里的代码有一个错字：

return this.auth.user.pipe()
           take(1),

应该

return this.auth.user.pipe(
           take(1),

现在它起作用了。