使用帶有 vue 3 路由保護的 firebase 身份驗證

Question

我需要將 firebase auth 與 vue 路由器一起使用。

我有這個簡單的守衛，但我注意到有時如果用戶沒有登錄，他們也會看到一段時間的頁面。

router.beforeEach( async (to, from) => {
    onAuthStateChanged( getAuth(app), (user) => {
        console.log(user, to.meta.requireAuth)
        if( to.meta.requireAuth && !user ) {
            return {
                 name: 'Signin'
            }
        }
    })
})

我的組件內部也有這種控制，但我正在尋找全局的東西來防止未注冊的用戶看到該應用程序。

有什么建議嗎？

Answer 1

您可以將 onAuthStateChanged 包裝在 Promise 中，並在每個之前設置一個異步函數。

// in some global file
export async function getCurrentUser(): Promise<User | null> {
  return new Promise((resolve, reject) => {
    const unsubscribe = auth.onAuthStateChanged((user) => {
      unsubscribe();
      resolve(user);
    }, reject);
  });
}

// your router file
router.beforeEach(async (to, from, next) => {
  if (to.matched.some((record) => record.meta.publicAccess)) {
    next();
  } else {
    const currentUser = await getCurrentUser();
    if (currentUser) {
      next();
    } else {
      next({ name: "Login" });
    }
  }
});

// Your route object
{
      name: "Login",
      path: "/login",
      component: () => import("@/views/authentication/Login.vue"),
}