web-dev-qa-db-fra.com

Comment garder un utilisateur connecté à une application Firebase après l'actualisation?

J'ai une application construite dans firebase et angular, et je veux pouvoir garder les utilisateurs connectés après avoir actualisé la page. À l'heure actuelle, j'ai un écran de connexion avec deux champs d'entrée de base qui se lient à un contrôleur

    this.email = "";
    this.pass = "";
    this.emessage = "";

    this.loginUser = function() {
        ref.authWithPassword({
            email: this.email,
            password: this.pass
        }, function(error, authData) {
            if (error) {
                console.log("Login Failed!", error);
                this.emessage = error.message;
                $scope.$apply();
            } else {
                dataStorage.uid = authData.uid;
                $location.path('/projects');
                $scope.$apply(); 
            }
        }.bind(this));
    }

Tout cela est parfait et cela fonctionne, mais lorsque l'utilisateur actualise la page, il est déconnecté. Existe-t-il un moyen de vérifier, lorsque le contrôleur est chargé, si l'utilisateur est déjà connecté et redirigé automatiquement? Merci!

javascriptangularjsauthenticationfirebase
11
Justin Haddock

Le code que vous avez maintenant gère le cas où l'utilisateur ouvre une session. Pour gérer les cas où l'utilisateur est déjà connecté, vous surveillez l'état d'authentification. À partir de documentation de Firebase sur le contrôle de l'état d'autorisation :

// Create a callback which logs the current auth state
var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
ref.onAuth(function(authData) {
  if (authData) {
    console.log("User " + authData.uid + " is logged in with " + authData.provider);
  } else {
    console.log("User is logged out");
  }
});

Généralement, vous souhaitez uniquement afficher le bouton de connexion dans la variable else de cette fonction.

18
Frank van Puffelen

Si vous utilisez Angular 4, vous pouvez utiliser AngularFire2 - Intégration Firebase officielle.

J'ai un AuthService qui enveloppe AngularFire2. Je viens de récupérer le constructeur d'AuthSession in Service et de l'utiliser quand j'en ai besoin. Exemple:

@Injectable()
export class AuthenticationService {

    private authState: any;

    constructor(public afAuth: AngularFireAuth) {
        this.afAuth.authState.subscribe((auth) => {
          this.authState = auth
        });
    }

    get user(): any {
        return this.authenticated ? this.authState : null;
    }
}

Code de service d’authentification complet ici Full Angular 4 avec l’exemple Firebase ici

0
Makah