wake-up-neo.net

Wie halte ich einen Benutzer nach der Aktualisierung bei einer Firebase-App angemeldet?

Ich habe eine Anwendung in Firebase und Angular integriert und möchte Benutzer nach dem Aktualisieren der Seite weiterhin anmelden können. Momentan habe ich einen Anmeldebildschirm mit zwei grundlegenden Eingabefeldern, die an eine Steuerung gebunden sind

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

Dies ist alles in Ordnung und gut und es funktioniert, aber wenn der Benutzer die Seite aktualisiert, werden sie wieder abgemeldet. Gibt es eine Möglichkeit, beim Laden des Controllers festzustellen, ob der Benutzer bereits angemeldet ist und automatisch umleitet? Vielen Dank!

11
Justin Haddock

Der Code, den Sie jetzt haben, behandelt den Fall, in dem sich der Benutzer anmeldet. Um Fälle zu behandeln, in denen der Benutzer bereits angemeldet ist, überwachen Sie den Auth-Status. Aus der Firebase-Dokumentation zum Überwachen des Auth-Status :

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

Normalerweise möchten Sie nur die Anmeldeschaltfläche in der else dieser Funktion anzeigen.

18

Wie in einem Kommentar erwähnt, funktioniert die akzeptierte Antwort nicht mehr. Die aktuelle Methode zum Überprüfen, ob ein Benutzer angemeldet ist, lautet

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

(von https://firebase.google.com/docs/reference/js/firebase.auth.Auth#onAuthStateChanged )

1
mflodin

Ich habe die Herausforderung, dass meine Web-App öffentliche Seiten mit geschützten Funktionen enthält. Mit dem folgenden Code wird der Benutzer immer über Firebase SDK geladen, bevor etwas anderes (sofern angemeldet). Wird aber auch auf die Anmeldeseite umgeleitet, wenn die Seite eine Authentifizierung erfordert. Dies funktioniert gut mit Seiten-Reloads.

Router.beforeEach((to, from, next) => {

  // If route required authentication
  if (to.matched.some(record => record.meta.requiresAuth)) {

    // Load user
    firebase.auth().onAuthStateChanged(user => {

      // If user obj does not exist --> redirect to login page
      if (!user) {
        next({ name: 'login' });
      } else {
        store.commit("user/SET_USER", user);
        user.getIdToken().then(token => {
          store.commit("user/SET_TOKEN", token)
        });

        next();
      }
    });
  } else {

    // Path does not required auth - Still we check the user
    firebase.auth().onAuthStateChanged(user => {

      // If user exist (is logged in) --> store in state.
      if (user) {  
        store.commit("user/SET_USER", user);
        user.getIdToken().then(token => {
          store.commit("user/SET_TOKEN", token)
        });
        next();

      } else {
        next();
      }
    });
  }
})
0
segli

Wenn Sie Angular 4 verwenden, können Sie AngularFire2 - Official Firebase Integration verwenden.

Ich habe einen AuthService, der AngularFire2 umgibt. Ich rufe AuthSession einfach im Service-Konstruktor ab und verwende es, wenn ich es brauche. Beispiel:

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

Vollständiger Authentifizierungsservicecode hier Vollständiger Angular 4 mit Firebase-Beispiel hier

0
Makah