Angular 4 w / AngularFire 2和Auth Guard-Java 学习之路

我已经开始创建一个具有登录前和登录后部分的简单应用程序 . 我'm using FireBase (with AngularFire2) as my authentication provider and I'喜欢"Guard"在auth警卫服务中使用 canActivate() 的登录后页面 .

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

app.component.ts

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

authentication.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说“Can Activate False”，这是完美的 . 我还没有登录 .

当我登录，然后再次尝试链接时，我得到“Can Activate True”，这也是完美的 .

当我再次注销，没有刷新时，我尝试点击上面的链接，我没有得到任何console.log回来 .

我觉得我的订阅或一般的一切都有问题 . 我能做错什么？

1 回答

试试这个：

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

这更容易 . 没有搞乱异步和同步的东西 .

回复于 2024-05-05T04:27:40+08:00

Angular 4 w / AngularFire 2和Auth Guard

1 回答

相关问题