为什么即使登录功能适用于 Firebase，我也无法设置持久性？

Question

我有一个包含电子邮件和密码的表单的组件。进口量居前：

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(),

如果我将这些值从fbApp.auth()传递到signInWithEmailAndPassword()函数，则会验证并登录帐户

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

接下来，我想保持会话，这样用户就不会在刷新时注销，只有在选项卡关闭的情况下。因此，我修改了代码，并用setPersistence封装了signInWithEmailAndPassword，如下所示：

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有关，但我有问题。

Answer 1

这个问题与我在这里回答的关于如何导入Material Components Web JavaScript文件的问题非常相似。

幸运的是，我在雄心勃勃的EmberJS项目中使用Firebase和Firebase Auth已经有一年了。这个过程非常简单，下面是一个完整的工作示例。

包内.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'});
....

在vendor.js和app.js文件之前的index.html中

....
    <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>
....

在.eslintrc.js 中

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

然后在Fastboot中的任何地方而不是(如果使用的话(只称为firebase方法和属性。例如

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

享受吧！