使用Nuxt.js和Firebase中间件进行身份验证

k7fdbhmy 于 2023-02-19 发布在其他

关注(0)|答案(1)|浏览(143)

我有一个Nuxt JS 3 + Firebase项目。在这个项目中，需要登录才能访问管理面板。
我在下面编写的代码部分工作正常。

但是，正如您在Gif中所看到的，当我在没有登录的情况下转到/admin/dashboard页面时，页面会出现几秒钟，也就是说，它会呈现并将其发送到登录页面。

我想要的是首先检查您是否已登录，如果您未登录，它不会转到/admin/dashboard，而是停留在登录页面。

//middleware/isAuth.js

import { auth } from "~~/firebase/config";

export default defineNuxtRouteMiddleware(async (to, from) => {
  await auth.onAuthStateChanged(async (user) => {
    if (user == null && to.name != "admin") {
      return await navigateTo("/admin");
    } else if (user && to.name == "admin") {
      return navigateTo("/admin/dashboard");
    } else if (user && to.name != "admin") {
      return navigateTo(from.fullPath);
    }
  });
});

firebase

来源：https://stackoverflow.com/questions/75499060/authentication-using-nuxt-js-and-firebase-middleware

1条答案

按热度按时间

sq1bmfud1#

我用一个小技巧解决了这个问题，没有使用中间件

// layouts/admin/default.vue
<template>
   <div v-if="loading">loading</div>
   <div v-else>
   ....
   </div>
<template>
<script setup>
  import { useAuthStore } from "~~/stores/authStore";
  import { auth } from "@/firebase/config";

  const currentUser = ref(false);
  const loading = ref(true);
  const router = useRouter();
  const authStore = useAuthStore();
  auth.onAuthStateChanged(async () => {
    loading.value = true;
    currentUser.value = await auth.currentUser;
    if (currentUser.value) {
      await authStore.setCurrentUser(currentUser.value);
      router.push("/admin/dashboard");
    } else {
      router.push("/admin");
    }
    loading.value = false;
  });
</script>

赞(0）回复(0）举报 2023-02-19

我来回答

使用Nuxt.js和Firebase中间件进行身份验证

1条答案

相关问题

热门标签

最新问答