Vue 组件仅在 FirebaseUI 重定向后在控制台悬停、窗口调整大小等时更新

Posted 2023-02-22

【中文标题】Vue 组件仅在 FirebaseUI 重定向后在控制台悬停、窗口调整大小等时更新

【英文标题】：Vue component only updating on console hover, window resize, etc, after FirebaseUI redirect

【发布时间】：2020-05-27 16:43:55

【问题描述】：

我正在使用 FirebaseUI 进行 Vue(tify) 登录。登录发生在 v-dialog 中并重定向到“帐户”页面。相关脚本：

export default 
  data() 
    let uiConfig = 
      signInSuccessUrl: "/account",
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      ]
    ,
    return 
      uiConfig: uiConfig
    
  

另一方面，帐户页面如下所示：

<template>
  <div v-if="user"> user.displayName </div>
</template>

<script>
export default 
  data() 
    return 
      user: null
    
  ,
  created() 
    firebase.auth().onAuthStateChanged(user => 
      if (user) 
        this.user =  displayName: user.displayName ;
      
    );
  

</script>

我的预期行为：我单击其中一个登录选项（比如说 Google），它会将我重定向到 /account。然后它呈现 div 并向我显示我的用户名。

实际行为：重定向后页面保持空白。当我打开抽屉、调整窗口大小或将鼠标悬停在 chrome DevTools 中的 Vue 开发人员控制台上时，页面会正确呈现。

我认为这是因为 DOM 没有成功渲染......但无论我尝试什么，我都无法让它工作。

有什么想法吗？

【问题讨论】：

尝试在挂载的而不是创建的钩子中加载用户。

恐怕没有变化。

【参考方案1】：

两个组件中的数据部分应如下所示：

data() 
    return 
      uiConfig: 
        signInSuccessUrl: "/account",
        signInOptions: [
          firebase.auth.GoogleAuthProvider.PROVIDER_ID,
          firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        ]
      
    
  

data() 
    return 
     user: null
    
  ,

【讨论】：

你说得对。我的一个错字。我已经编辑了我的代码。

不幸的是，没有。您的建议是我的代码一开始的样子，但我在这里打错了。

你能简化你的代码在 jsfiddle 中做一个例子吗？

【参考方案2】：

最后问题似乎是 FirebaseUI 的 SignInSuccessful 方法如何与 vue-router 一起使用：不好。为了避免这个问题，我取出了该方法并添加了一个在成功登录时触发的回调。

uiConfig: 
  signInOptions: [
    firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    firebase.auth.FacebookAuthProvider.PROVIDER_ID
  ],
  callbacks: 
    signInSuccessWithAuthResult: function() this.$router.push( path: 'account' )
  
,

通过此更改，实现了预期的行为。