Как заставить пользователя войти в приложение firebase после обновления?

У меня есть приложение, созданное в firebase и angular, и я хочу, чтобы пользователи могли войти в систему после обновления страницы. Прямо сейчас у меня есть экран входа в систему с двумя базовыми полями ввода, которые привязываются к контроллеру

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

Все это прекрасно, и он работает, но когда пользователь обновляет страницу, они записываются обратно. Есть ли какой-то способ, когда контроллер загружается, видит, что пользователь уже зарегистрирован и авто-перенаправляется? Спасибо!

Ответы

Ответ 1

В коде, который вы сейчас используете, используется случай, когда пользователь входит в систему. Для обработки случаев, когда пользователь уже зарегистрировался, вы контролируете состояние auth. Из документации Firebase по мониторингу состояния аутентификации:

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

Обычно вы хотите показывать кнопку входа в else этой функции.

Ответ 2

Как уже упоминалось в комментарии, принятый ответ больше не работает. Текущий способ проверки, вошел ли пользователь в систему, -

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

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

Ответ 3

Если вы используете Angular 4, вы можете использовать AngularFire2 - Официальная интеграция с Firebase.

У меня есть AuthService, который обертывает AngularFire2. Я просто извлекаю AuthSession в конструкторе Service и использую, когда мне это нужно. Пример:

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

Код полной аутентификации здесь Полный Angular 4 с примером Firebase здесь

Ответ 4

У меня проблема с тем, что в моем веб-приложении есть открытые страницы с защищенными функциями. С помощью следующего кода пользователь всегда загружается через Firebase SDK, прежде чем что-либо еще (если он вошел в систему). Но также перенаправляется на страницу входа в систему, если страница требует аутентификации. Это прекрасно работает при перезагрузке страницы.

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