刷新页面以 5 角自动退出 [英] Refresh page get log out automatically in angular 5

问题描述

我使用 firebase 进行登录和注册.那是我的 authService 看起来像:

令牌:字符串；已验证:布尔值 = 假；登录用户(电子邮件:字符串，密码:字符串){火力基地.auth().signInWithEmailAndPassword(email, password).then(响应 => {this.authenticated = true;console.log('authService-->signinUser-->authenticated', this.authenticated);//使用电子邮件和网络名称的组合设置钱包，例如[e-mail]@stschainthis.dataService.setWallet(`${email}${this.domainExtenstion}`);this.setEmail(email);this.router.navigate(['/dashboard']);console.log('登录')火力基地.auth().currentUser.getIdToken().然后((令牌:字符串)=>{(this.token = 令牌);//localStorage.setItem('token', JSON.stringify(token));});}).catch(错误=> {控制台日志(错误)；警报(错误)；});}isAuthenticated() {返回 this.token != null;}

在我的 authGuardService 中，我像这样调用 canactivate 方法:

canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): boolean {如果(！this.authService.authenticated){console.log('无法加载')this.router.navigate(['/signin']);}console.log('可以加载')返回 this.authService.isAuthenticated();}}

但是当我刷新页面时，这个 authenticated 值总是为 false.

请任何人知道会感激的原因.

解决方案

在您的代码中:

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

这个 then 块仅在用户明确登录时运行.它不会在页面重新加载时自动运行.

但 Firebase 身份验证确实会在页面重新加载时自动(尝试)恢复用户的登录会话，您的代码只是不知道这一点.要检测身份验证状态更改，请使用身份验证状态侦听器(如 文档):

<块引用>

firebase.auth().onAuthStateChanged(function(user) {如果(用户){//用户已登录.} 别的 {//没有用户登录.}});

请注意，onAuthStateChanged 回调会针对显式(例如您调用 signInWith...)和隐式(例如页面重新加载)身份验证状态更改而调用，因此请考虑移动(一些)你的代码从 then() 块到这个回调.

I'm using firebase for the signIn and signup. that is my authService look like :

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. [e-mail]@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;       
}

and in my authGuardService im calling canactivate methode like this :

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

but when i refresh the page this authenticated value get false always.

Please, anyone, know the cause that will appreciate.

解决方案

In your code you do:

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

This then block only runs when the user explicitly signs in. It does not automatically run when the page gets reloaded.

But Firebase Authentication does automatically (try to) restore the user's sign-in session when the page is reloaded, your code just isn't aware of it. To detect auth state changes, use an auth state listener (as shown in the documentation):

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

Note that the onAuthStateChanged callback gets called for both explicit (e.g. you calling signInWith...) and implicit (e.g. page reload) auth state changes, so consider moving (some of) your code from the then() block to this callback.

这篇关于刷新页面以 5 角自动退出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！