使用Firestore自定义声明的角度身份验证登录

Question

我正在firestore身份验证中动态创建用户，并添加了多种类型的声明，例如admin，讲师，助手。到目前为止，我已经能够使用新创建的用户登录，并根据我提供的登录凭据将声明属性设置为true，即admin: true，instructor: true。但是我无法在路由中正确设置[AuthGuard]，甚至没有登录就无法使用url重定向到组件，这应该不会发生。我对如何正确添加AuthGuard感到有些困惑。这是我的代码

auth-service.ts

import * as firebase from 'firebase/app';

import { AngularFireAuth } from '@angular/fire/auth';
import { AngularFirestore } from '@angular/fire/firestore';
import { Injectable } from '@angular/core';
import { JwtHelperService } from '@auth0/angular-jwt';
import { Observable } from 'rxjs/Observable';
import { Router } from "@angular/router";

@Injectable() 
export class AuthService {
public user: Observable<firebase.User>;
public userDetails: firebase.User = null;

constructor(private _firebaseAuth: AngularFireAuth, private router: Router, 
    private _firestore: AngularFirestore,
    public jwtHelper: JwtHelperService ) {
    this.user = _firebaseAuth.authState;
    this.user.subscribe(
        (user) => {
            if(user) {
                this.userDetails = user;   
                this._firebaseAuth.auth.currentUser.getIdTokenResult(true).then(res => {
                    user= res.claims;
                })
            }
            else {
                this.userDetails = null;
            }
        }
    );
}
}

auth-guard.service.ts

import 'rxjs/add/operator/do';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/take';

import { CanActivate, Router } from '@angular/router';

import { AuthService } from './auth-service.service';
import { Injectable } from "@angular/core";
import { Observable } from "rxjs/Rx";
import { tap } from 'rxjs/operators';

@Injectable()

export class AuthGuard implements CanActivate {

    constructor(private auth: AuthService, private router: Router) { }

    canActivate() {
      return this.auth.user
              .take(1)
              .map(authState => !!authState)
              .do(authenticated => {
                if (!authenticated) {
                    this.router.navigate(['auth/login']);
                }
              });

    }

  }

app-routing.module.ts

import { ExtraOptions, RouterModule, Routes } from '@angular/router';

import { AuthGuard } from './auth/auth-guard.service';
import { LoginComponent } from './auth/login/login.component'
import {
  NbAuthComponent,
} from '@nebular/auth';
import { NgModule } from '@angular/core';
import { RegisterComponent } from './auth/register/register.component';
import { RequestPasswordComponent } from './auth/request-password/request-password.component';
import { ResetPasswordComponent } from './auth/reset-password/reset-password.component';

const routes: Routes = [
  {
    path: 'pages',
    canActivate: [AuthGuard],
    loadChildren: () => import('../app/pages/pages.module')
      .then(m => m.PagesModule),
  },
  {
    path: 'studentcourseregistration',
    loadChildren: () => import('../app/studentcourseregistration/studentcourseregistration.module')
      .then(m => m.StudentcourseregistrationModule),
  },
  {
    path: 'auth',
    component: NbAuthComponent,
    children: [
      {
        path: '',
        component: LoginComponent,
      },
      {
        path: 'login',
        component: LoginComponent,
      },
      {
        path: 'register',
        component: RegisterComponent,
      },
      // {
      //   path: 'logout',
      //   component: ,
      // },
      {
        path: 'request-password',
        component: RequestPasswordComponent,
      },
      {
        path: 'reset-password',
        component: ResetPasswordComponent,
      },
    ],
  },
  // {
  //   path: 'student',
  //   loadChildren: () => import('../student/student.module')
  //     .then(m => m.StudentModule),
  // },
  { path: '', redirectTo: 'auth/login', pathMatch: 'full' },
  { path: '**', redirectTo: 'pages' },
];

const config: ExtraOptions = {
  useHash: false,
};

@NgModule({
  imports: [RouterModule.forRoot(routes, config)],
  exports: [RouterModule],
})
export class AppRoutingModule {
}

像这样在身份验证中添加新用户

  this._firebaseAuth.auth.createUserWithEmailAndPassword(this.user.email, this.user.password)
  .then(cred => {
    const adminRole = firebase.functions().httpsCallable('addAdminRole');
    adminRole({email: this.user.email}).then(res => {
      console.log(res);
    })
  })

Answer 1

会是这样的东西：

import { CanActivate, Router } from '@angular/router';
import { Injectable } from "@angular/core";
import { AngularFireAuth } from '@angular/fire/auth';
import { take, switchMap } from 'rxjs/operators';

@Injectable()
export class AdminGuard implements CanActivate {

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

    canActivate() {
        return this.auth.authState.pipe(
            take(1),
            switchMap(async (authState) => {
                if (authState) { // check are user is logged in
                    const token = await authState.getIdTokenResult()
                    if (!token.claims.admin) { // check claims
                        this.router.navigate(['/auth/login'])
                        return false
                    } else {
                        return true
                    }
                } else {
                    this.router.navigate(['/auth/login'])
                    return false
                }
            }),
        )
    }
}