刷新页面在 angular 5 后自动注销

Question

我正在使用 firebase 进行登录和注册。那是我的 authService 的样子：

token: string;
authenticated: boolean = false;
signinUser(email: string, password: string) {
        firebase
            .auth()
            .signInWithEmailAndPassword(email, password)
            .then(response => {
                this.authenticated = true;
                console.log('authService-->signinUser-->authenticated', this.authenticated);


                //Set the a wallet using a combination of the email and the name of the network e.g. Majd@gmail.com@stschain
                this.dataService.setWallet(`${email}${this.domainExtenstion}`);
                this.setEmail(email);
                this.router.navigate(['/dashboard']);
                console.log('sinign in')
                firebase
                    .auth()
                    .currentUser.getIdToken()
                    .then(
                        (token: string) => {
                            (this.token = token);
                            // localStorage.setItem('token', JSON.stringify(token));
                        }
                    );
            })
            .catch(error => {
                console.log(error);
                alert(error);
            });

    }

isAuthenticated() {
   return this.token != null;       
}

并且在我的 authGuardService 中，我像这样调用 canactivate 方法：

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {
    if (!this.authService.authenticated) {
      console.log('cant load' )
      this.router.navigate(['/signin']);
    }
    console.log('can load' )
    return this.authService.isAuthenticated();
  }
}

但是当我刷新页面时，此 authenticated 值始终为 false。

拜托，任何人，知道会感激的原因。

Answer 1

在你的代码中你做了：

firebase
    .auth()
    .signInWithEmailAndPassword(email, password)
    .then(response => {
        this.authenticated = true;

此 then 仅在用户显式登录时阻止运行秒。它不会在重新加载页面时自动运行。

但是 Firebase 身份验证确实自动（尝试）在页面重新加载时恢复用户的登录会话，您的代码只是不知道它。要检测身份验证状态更改，请使用身份验证状态侦听器（如 documentation 所示）：

firebase.auth().onAuthStateChanged(function(user) {
  if (user) {
    // User is signed in.
  } else {
    // No user is signed in.
  }
});

请注意，onAuthStateChanged 回调会在显式（例如您调用 signInWith...）和隐式（例如页面重新加载）身份验证状态更改时被调用，因此请考虑将您的（部分）代码从此回调的 then() 块。

刷新页面在 angular 5 后自动注销

Refresh page get log out automatically in angular 5

firebase-authentication

angular

auth-guard

angular5