Почему я не могу установить постоянство, даже если функции входа работают с Firebase? - PullRequest
Новая
       21

Почему я не могу установить постоянство, даже если функции входа работают с Firebase?

0 голосов
/ 14 ноября 2018

У меня есть компонент с формой, которая содержит адрес электронной почты и пароль. Импорт вверху: 

import Component from '@ember/component';
import { inject as service } from '@ember/service';
import { computed } from '@ember/object';
import * as firebase from 'firebase';

Далее я внедряю сервис для firebaseApp и сеанса (сеанс просто имеет некоторые атрибуты, которые я установил, чтобы сообщить приложению, что мы аутентифицированы - они будут реорганизованы позже): 

session: service(),
firebaseApp: service(),

Если я передаю эти значения в функцию signInWithEmailAndPassword() из fbApp.auth(), учетная запись проверяется и входит в систему. Работает, как и ожидалось: 

login() {
  const session = this.get('session');
  const fbApp = this.get('firebaseApp');
  const e = this.get('form.email');
  const p = this.get('form.password');

  fbApp.auth().signInWithEmailAndPassword(e, p).then(u => {
    session.set('user.email', u.email);
    session.set('user.signedIn', true);
    this.get('goHome')(); // route transition to home
  }).catch(e => {
    this.set('error', 'Something went wrong. Try again?');
  });
}

Далее я хотел сохранить сеанс, чтобы пользователь не вышел из системы при обновлении, только если вкладка закрыта. Поэтому я изменил код и обернул signInWithEmailAndPassword в setPersistence следующим образом: 

login() {
  const session = this.get('session');
  const fbApp = this.get('firebaseApp');
  const e = this.get('form.email');
  const p = this.get('form.password');

  fbApp.auth().setPersistence(firebase.auth.Auth.Persistence.SESSION)
              .then(()=> {

    fbApp.auth().signInWithEmailAndPassword(e, p).then(u => {
      session.set('user.email', u.email);
      session.set('user.signedIn', true);
      this.get('goHome')(); // route transition to home
    }).catch(e => {
      this.set('error', 'Something went wrong. Try again?');
    });

  }).catch(e => {
    this.set('error', 'Something went wrong. Try again?');
  });
}

Это не работает. Я получаю Cannot read property 'SESSION' of undefined ошибку в консоли. Я уверен, что это связано с тем, как импортируется firebase, но у меня проблемы с этим.

1 Ответ

0 голосов
/ 16 ноября 2018

Этот вопрос очень похож на тот, на который я ответил здесь о том, как импортировать файл Web Material JavaScript Components.

К счастью, я использую Firebase и Firebase Auth в своем амбициозном EmberJS проекте уже около года. Процесс очень прост, полный рабочий пример приведен ниже.

В упаковке. Json 

....
  "devDependencies": {
    "firebase": "^5.5.8",
....

В ember-cli-build.js 

....
  let app = new EmberApp(defaults, {
    ....
    fingerprint: {
      enabled: true,
      generateAssetMap: true,
      exclude: [
        'firebase-app',
        'firebase-auth',
        'firebase-messaging',
        'firebase-messaging-sw',
        ....
      ]
    },
    ....
  });

  ....

  app.import('node_modules/firebase/firebase-app.js', { outputFile: 'firebase-app.js'});
  app.import('node_modules/firebase/firebase-auth.js', { outputFile: 'firebase-auth.js'});
  app.import('node_modules/firebase/firebase-messaging.js', { outputFile: 'firebase-messaging.js'});
....

В index.html до файлы vendor.js и app.js 

....
    <script src="/firebase-app.js"></script>
    <script src="/firebase-auth.js"></script>
    <script src="/firebase-messaging.js"></script>
    <script>
      // Initialize Firebase
      var config = {
        apiKey: "ABC123XYZ",
        authDomain: "auth.my-app.com", // Did you know you can customize this or use default my-app.firebaseapp.com
        databaseURL: "https://my-app.firebaseio.com",
        projectId: "my-app",
        storageBucket: "app.appspot.com",
        messagingSenderId: "123456789"
      };
      if( typeof firebase !== 'undefined'  && firebase) {
        firebase.initializeApp(config);
      }
    </script>
....

In .eslintrc.js 

....
module.exports = {
  ....
  env: {
    browser: true
  },
  globals: {
    "firebase": false
  },
  ....
};
....

Затем в любом месте , но не в Fastboot (если он используется), просто вызвал методы и свойства firebase.e.g 

....
    firebase.auth().onAuthStateChanged(function(user) {
      if (user) {
        user.getIdTokenResult()
          .then((idTokenResult) => {
            session.setToken(idTokenResult.token);
            if (idTokenResult.claims.admin) {
              session.setIsAdmin(true);
            } else {
              session.setIsAdmin(false);
            }

            session.setUser(user);

            session.setIsAuthenticated(true);

          })
          .catch((error) => {
            console.log(error);
          });
      } else {
        // User is signed out.
        // ...
      }
    });
....

Наслаждайтесь!

...