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

我正在使用Firebase与Angular6合作。我现在是个新手。我正在学习codewithmosh的Mosh Hamedani课程。但问题是我用的是angular6和我用Angular4看的教程

现在我正在努力保护管理路由。在firebase中定义了一些凭据

如果用户是管理员，我必须使用显示和隐藏功能

以下是有关firebase中用户的数据定义

admin-auth-guard.service.ts

---

以下是处理此amdin身份验证文件时出现的错误

auth.service.ts

user.service.ts

app-user.ts

---

最好是显示错误，而不是像这样突出显示。无论如何，对于路线守卫来说，这就是我实现它的方式

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

导出类身份验证服务{
用户$：可观察；
构造函数（专用afAuth:AngularFireAuth，专用db:AngularFireDatabase）
{
this.user$=this.afAuth.authState
.pipe（开关映射（用户=>{
如果（用户）{
返回这个.db.object（`users/${user\uUid}`）。valueChanges（）；
}否则{
返回（空）；
}
}));
}
}

这样，无论何时订阅user$observable，都可以从实时数据库中获取用户的对象

之后，在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']); 
        }
      })
    );

  } 

constructor（private\u auth:AuthService，
专用路由器（路由器）{
}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnapshot）：可观察
诺布尔{
返回此。\ u auth.user$.pipe(
以（1）为例，
映射（user=>user&&user.admin），
点击（isAdmin=>{
如果（！isAdmin）{
错误（'拒绝访问-仅限管理员'）；
//改道去你想去的地方
this.router.navigate（['login']）；
}
})
);
} 

---

希望这能有所帮助。

如果您显示错误，而不是像以前那样突出显示，那会更好。无论如何，对于路线守卫来说，这就是我实现它的方式

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

导出类身份验证服务{
用户$：可观察；
构造函数（专用afAuth:AngularFireAuth，专用db:AngularFireDatabase）
{
this.user$=this.afAuth.authState
.pipe（开关映射（用户=>{
如果（用户）{
返回这个.db.object（`users/${user\uUid}`）。valueChanges（）；
}否则{
返回（空）；
}
}));
}
}

这样，无论何时订阅user$observable，都可以从实时数据库中获取用户的对象

之后，在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']); 
        }
      })
    );

  } 

constructor（private\u auth:AuthService，
专用路由器（路由器）{
}
激活(
下一步：ActivatedRouteSnapshot，
状态：RouterStateSnapshot）：可观察
诺布尔{
返回此。\ u auth.user$.pipe(
以（1）为例，
映射（user=>user&&user.admin），
点击（isAdmin=>{
如果（！isAdmin）{
错误（'拒绝访问-仅限管理员'）；
//改道去你想去的地方
this.router.navigate（['login']）；
}
})
);
} 

---

希望这能有所帮助。

我认为，如果运行应用程序并在控制台上测试它以查看错误，则只需执行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中的（用户）会突出显示，如果您发布错误消息，我可能会提供帮助，如果前面的答案没有帮助。

我认为这只是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中的（用户）会突出显示，如果您发布错误消息，我可能会提供帮助，如果前面的答案没有帮助。

我已经修改了您的方法，看看它是否有效

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

---

get-appUser$（）：可观察，内置于Angular 7中。你的Angular 6项目会很好的。
我已经修改了你的方法，看看它是否有效

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

get-appUser$（）：可观察，内置于Angular 7中。您的Angular 6项目将正常工作。
您在user.service.ts中所做的更改对于仍然使用Angular realtime db来说是可以的，您只需要更改您的canActivate方法。。。
userService.get（user.uid）返回angularfireobject，您需要通过调用.valueChanges（）将其转换为observable。就这些

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

    }

canActivate（）：可观察{
返回this.auth.user$
.switchMap（用户=>{
返回此.userService.get（user.uid）.valueChanges（）；
} )
.map（appUser=>appUser.isAdmin）；
}
您在user.service.ts中对仍然使用angular realtime db所做的更改是可以的，您只需要更改您的canActivate方法。。。
userService.get（user.uid）返回angularfireobject，您需要通过调用.valueChanges（）将其转换为observable。就这些

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

    }

canActivate（）：可观察{
返回this.auth.user$
.switchMap（用户=>{
返回此.userService.get（user.uid）.valueChanges（）；
} )
.map（appUser=>appUser.isAdmin）；
}
什么必须激活返回？一个
可见的
，对吗