Защита административных маршрутов с использованием angular 6 и firebase

Question

Я работаю с Angular6, используя Firebase.В настоящее время я новичок в Angular.Я беру курс Моша Хамедани из Codewithmosh.Но проблема в том, что я использую angular6 и учебник, который смотрю в Angular4.

Теперь я работаю над защитой маршрутов администратора.Где некоторые учетные данные определены в firebase.

Я должен работать с функциями показа и скрытия, если пользователь является администратором.

Вот данные, определяющие пользователя в firebase.

admin-auth-guard.service.ts

Вот ошибка при работе с этим файлом amdin-auth.

auth.service.ts

user.service.ts

app-user.ts

Answer 1

Изменения, которые вы внесли в user.service.ts для дальнейшего использования angular realtime db, в порядке, вам просто нужно изменить свой метод 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 2

Я думаю, что это просто проверка во время компиляции 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 3

Я изменил ваш метод и посмотрите, работает ли он

Сначала добавьте метод, как показано ниже, в auth.service.ts после метода logout ()

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));
}

Просто следите за моим проектом на Github My Github Link , который встроен в Angular 7. Ваш проект Angular 6 будет работать нормально.

Answer 4

Было бы лучше, если бы вы показали ошибку вместо выделения, как вы это сделали.В любом случае, для охраны маршрутов, вот как я этого добиваюсь.

in 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);
        }
      }));
 }
}

Таким образом, когда вы подписываетесь на пользователя $ observable you 'У вас всегда будет объект пользователя из базы данных реального времени.

Впоследствии в 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']); 
        }
      })
    );

  } 

Надеюсь, это поможет.