时间戳

首页 > 解决方案 > 为什么即使登录功能与 Firebase 一起使用，我也无法设置持久性？

javascript - 为什么即使登录功能与 Firebase 一起使用，我也无法设置持久性？

问题描述

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

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()函数 from 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 的导入方式有关，但我遇到了麻烦。

标签： javascriptfirebaseember.jsimportfirebase-authentication

解决方案

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

幸运的是，我在 Ambitious EmberJS 项目中使用 Firebase 和 Firebase Auth已有大约一年的时间了。该过程非常简单，下面是完整的工作示例。

在 package.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 方法和 properties.eg

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

享受！

推荐阅读