Question

我已经阅读并尝试了上万亿条建议。

大约2年前，我使用AngularFire2在Angular中进行了Auth Guard，如下所示：

 canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    this.af.auth.subscribe((auth) =>  {
      if(auth == null) {
        this.router.navigate(['/login']);
        this.allowed = false;
      } else {
        this.allowed = true;
      }
    })
    return this.allowed;
  }

今天，我正在尝试使用当今的javascript复制相同的身份验证防护

Angular CLI: 7.3.2
Node: 11.10.0
OS: linux x64
Angular: 7.2.5
... animations, common, compiler, compiler-cli, core, forms
... language-service, platform-browser, platform-browser-dynamic
... router, service-worker

Package                           Version
-----------------------------------------------------------
@angular-devkit/architect         0.13.2
@angular-devkit/build-angular     0.13.2
@angular-devkit/build-optimizer   0.13.2
@angular-devkit/build-webpack     0.13.2
@angular-devkit/core              7.3.2
@angular-devkit/schematics        7.3.2
@angular/cli                      7.3.2
@angular/fire                     5.1.1
@angular/pwa                      0.12.4
@ngtools/webpack                  7.3.2
@schematics/angular               7.3.2
@schematics/update                0.13.2
rxjs                              6.3.3
typescript                        3.2.4
webpack                           4.29.0

我知道rxjs发生了一些变化，所以像这样

this.af.auth.subscribe((auth) => {

现在成为

this.af.authState.pipe(map(auth) => {

除上述操作外，浏览器选项卡会挂在我身上。

关于如何使用AngularFirebase进行路由防护，我已经看到至少15个不同的问题，而且它们都采用了不同的方法。

我知道在接下来的几个月中情况将非常有可能发生变化，但是截至2019年2月18日，您如何使用AngularFire2进行路由防护？

修改

在这里变得有趣/奇怪。我在下面尝试了@ sergey-mell答案。

这是我在路线中应用authGuard的方式

const routes: Routes = [
  { path: 'auth', loadChildren: './auth/auth.module#AuthModule' },
  {
    path: '',
    component: MenuComponent,
    children: [
      { path: '', component: HomeComponent },
      { path: 'new', component: NewcustomerComponent },
      { path: ':customer_id', component: CustomerdetailComponent }
    ],
    canActivate: [AuthGuard]
  }
];

发生的是，如果未登录，而我直接在浏览器localhost:4200/中访问，浏览器将挂起。

在控制台中，Chrome通知我访问下面的URL

https://crbug.com/882238

我点击了链接，并被告知我没有查看该错误的权限。困扰我的错误。好吧。

那么我有什么想念的吗？

Answer 1

前言：

如果要查看Angular docs，卫队可以返回一个解析为boolean的Observable。
AngularFire docs表明我们可以使用AngularFireAuth.user来观察用户的身份验证状态。

因此，对我而言，您的警卫应如下所示：

@Injectable()
class LetMeInGuard implements CanActivate {
  constructor(private afAuth: AngularFireAuth,
              private routes: Router) {}

  canActivate(route: ActivatedRouteSnapshot, 
              state: RouterStateSnapshot): Observable<boolean> {
    return this.afAuth.user.pipe(
      map(user => {
         if (!user) {
             this.router.navigate(['/login']);
         }
         return !!user;
      })
    );
  }
}

在AngularFirebase2中使用canActivate Angular

1 个答案: