我正在尝试使用 Firebase Auth 为 Angular 2 路由构建 AuthGuard。
这是 AuthGuard 服务:
import { Injectable } from '@angular/core';
import { CanActivate, Router,
ActivatedRouteSnapshot,
RouterStateSnapshot } from '@angular/router';
import { AuthService } from './auth.service';
@Injectable()
export class AuthGuard implements CanActivate {
constructor(private AuthService: AuthService,
private router: Router) {}
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
if (this.AuthService.loggedIn) { return true; }
this.router.navigate(['login']);
return false;
}
}
这是 AuthService,它检查用户是否登录并将结果绑定到其构造函数中的属性“loggedIn”。
import { Injectable } from '@angular/core';
import { AngularFire } from 'angularfire2';
import { Router } from '@angular/router';
@Injectable()
export class AuthService {
loggedIn: boolean = false;
constructor(
public af: AngularFire,
public router: Router) {
af.auth.subscribe(user => {
if(user){
this.loggedIn = true;
}
});
}
}
这里的问题显然是异步的。AuthGuard 的 canActivate() 始终返回 false 值,因为订阅没有及时接收数据以将“loggedIn”更改为 true。
解决此问题的最佳做法是什么?
编辑:
更改了 AuthGuard 以返回一个 observable。
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot) {
return this.af.auth.map((auth) => {
if (!auth) {
this.router.navigateByUrl('login');
return false;
}
return true;
});
}
它有点工作,因为你没有被重定向到登录......但目标 AuthGuarded 组件没有呈现。
不确定它是否与我的 app.routes 有关。这是该部分的代码:
const routes: Routes = [
{ path: '', component: MainComponent, canActivate: [AuthGuard] },
...
];
export const routing = RouterModule.forRoot(routes);