如何从login登录方法中导出异步获取的用户信息user变量

核心问题 #

• 异步执行时序问题：signInWithPopup是异步Promise方法，你对导出的user赋值的逻辑写在then回调里，只有用户完成弹窗登录之后才会执行。但其他模块导入当前文件时是同步执行的，此时回调还没触发，user还没完成赋值，所以拿到的是未定义状态。
• 模块规范混用：你代码开头用了ES Module的export语法导出login方法，后面又用CommonJS的module.exports语法导出变量，两种模块规范混用会导致导出逻辑异常，前端工程化项目（React/Vue等脚手架项目）默认都是ES Module规范，不推荐使用module.exports。
• 导出值无法响应更新：静态导出的变量是初始值，后续异步更新的内容不会主动同步到其他导入的模块，除非主动读取最新的属性值。

解决方案 #

方案1：通过Promise返回用户信息（推荐新人使用） #

直接修改login方法返回Promise，调用时在then里直接拿到登录后的用户信息，无需额外做全局导出：

export function login(){
  console.log("entrando A LOGIN")    
  const provider = new firebase.auth.GoogleAuthProvider();
  // 直接返回Promise链
  return firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    const credential = result.credential;      
    const token = credential.accessToken;
    const user = result.user;
    // 抛出用户信息给调用方
    return user
  })
}

其他模块调用方式：

import { login } from './你的当前文件名'

// 触发登录的位置调用
login().then(user => {
  // 此处可拿到正确的用户信息
  console.log('登录成功，用户信息：', user)
}).catch(err => {
  // 处理登录取消、登录失败的场景
  console.error('登录异常：', err)
})

方案2：全局共享用户信息 #

如果需要多个模块都能拿到用户信息，可以单独抽全局变量存储：

// 顶部定义全局变量存储用户信息
let currentUser = null

export function login(){
  console.log("entrando A LOGIN")    
  const provider = new firebase.auth.GoogleAuthProvider();
  return firebase.auth()
  .signInWithPopup(provider)
  .then((result) => {
    const credential = result.credential;      
    const token = credential.accessToken;
    // 赋值给全局变量
    currentUser = result.user;
    return currentUser
  })
}

// 导出获取用户信息的方法
export const getCurrentUser = () => currentUser

其他模块使用方式：

import { getCurrentUser } from './你的当前文件名'

// 登录成功后任何位置都可以调用拿到最新用户
console.log(getCurrentUser())

补充优化 #

Firebase本身自带登录状态监听API，无需自己维护用户状态，更稳定可靠：

// 封装监听登录状态的方法
export function subscribeUserState(callback) {
  firebase.auth().onAuthStateChanged(user => {
    // 用户登录时user为用户信息，未登录/登出时user为null
    callback(user)
  })
}

其他模块直接调用该方法即可实时感知登录状态变化。

内容的提问来源于stack exchange，提问作者miguel angel Asencio