如何在不请求的情况下在firebase-auth中首次加载时获取currentUser

Question

我正在使用 firebase 身份验证，我的导航栏取决于用户是否登录。 当我加载网站时，如果用户之前没有注销，他应该仍然保持登录状态。但是，Firebase onAuthStateChanged 监听器在 100-300 毫秒后返回用户，所以我的导航栏无法确定用户是否登录。所以，导航栏显示登录和注册按钮 300 毫秒，然后 firebase 返回用户，导航栏显示仪表板和注销按钮。

我正在使用 vue，我尝试在本地存储上保存 UID 和用户名，但我担心安全性。 如果有人手动更改本地存储数据怎么办？ 此外，用户可以注销，但保持登录状态，我手动设置 localStorage.setItem('user', ....)

导航栏.vue

<div v-if="user.uid" class="flex row space-b">
   // userpic, photo, logout button
</div>
<div v-else>
   // login and signup button 
</div>

Vuex

state: {
user: {
  uid: null,
  photoURL: null,
  username: null,
},
},

我尝试在 onAuthStateChanged 侦听器返回某些内容之前不挂载 Vue 实例，但这不是一个好的解决方案，因此我将网站渲染延迟了近 300 毫秒。

Answer 1

无论如何，我将其保存在cookie中。 当网站加载时，如果存在cookie，则呈现navbar就像用户登录一样，然后在firebase侦听器返回后再次检查

Answer 2

这是因为 beforeEach 在 firebase 完全完成初始化之前被执行。

您可以使用 onAuthStateChanged 观察者确保仅在 firebase 完全初始化后才初始化 vue 应用程序。

解决它的一种方法是将 vue 初始化代码包装在 main.js(new Vue(... )) 中，使用 onAuthStateChanged 如下所示：

let app;

const auth = getAuth();
onAuthStateChanged(auth, (user) => {
  console.log("user", user);
  if (!app) {
    new Vue({
      router,
      vuetify: new Vuetify(options.Vuetify),
      render: (h) => h(App),
    }).$mount("#app");
  }
});

对于版本 7 firebase，您可以查看此 repo 文件https://github.com/ErikCH/FirebaseTokenFrontend/blob/master/src/main.js