带有 AngularFire 2 和 Auth Guard 的 Angular 4

Question

我已经开始创建一个包含登录前和登录后部分的简单应用程序。我使用 FireBase（使用 AngularFire2）作为我的身份验证提供程序，我想在身份验证服务中使用 canActivate() 来“保护”登录后页面。

我的问题是，我不知道每段代码的顺序或位置。我已经简化了下面的内容：

app.component.ts

constructor(private auth: Authentication) {
    this.auth.subscribe();
}

身份验证.ts

export class Authentication {

    state: Observable<firebase.User>;
    user: any;
    isLoggedIn: boolean;

    constructor(private afAuth: AngularFireAuth, private router: Router) {
        this.state = afAuth.authState;
    }

    subscribe() {
        this.state.subscribe((auth) => {
            if(auth) {
                this.user = auth;
                console.log(this.user);
                this.isLoggedIn = true;
                return true;
            } else {
                this.isLoggedIn = false;
                return false;
            }
        });
    }

    login() {
        this.afAuth.auth.signInWithPopup(new firebase.auth.GoogleAuthProvider());
    }

    logout() {
        this.afAuth.auth.signOut();
    }
}

auth-guard.service.ts

export class AuthGuard implements CanActivate {

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

    canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
        let url: string = state.url;
        return this.checkLogin(url);
    }

    checkLogin(url: string): boolean {
        if(this.auth.isLoggedIn) {
            console.log("Can Activate True");
            return true;
        } else {
            console.log("Can Activate False");
            return false;
        }
    }
}

现在它几乎可以正常工作。当我重新开始时，我会看到一个屏幕，屏幕顶部有我的所有链接，一个登录和一个注销按钮。当我单击屏幕顶部的链接时，我得到 console.log 说“可以激活 False”，这是完美的。我还没有登录。

当我登录，然后再次尝试链接时，我得到“可以激活 True”，这也是完美的。

当我再次注销且不刷新时，我尝试单击上面的链接，但没有返回任何 console.log。

我觉得我的订阅有问题，或者只是一般情况下的一切。我可能做错了什么？

Answer 1

对于这种情况，您可以使用 AngularFireAuthGuard。

将以下行添加到您的 routing.module.ts：

const redirectUnauthorizedToLogin = () => redirectUnauthorizedTo(['login']);

    path: '',
    component: UserDashboardComponent,
    //data: { title: 'user.dashboard' },
    canActivate: [AngularFireAuthGuard],
    data: {authGuardPipe: redirectUnauthorizedToLogin}

如果用户未通过身份验证，此代码片段将执行重定向。而且它易于实施。

Answer 2

试试这个：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
  return this.af.authState.map(auth => {
    if (isNullOrUndefined(auth)) {
      this.router.navigate(['/login']);
      return false;
    } else {
      return true;
    }
  });
}

这要容易得多。不要乱用 aync 和同步的东西。