'tag.htm'; break; case 'flag': $pre .= $default_pre .= 'flag.htm'; break; case 'my': $pre .= $default_pre .= 'my.htm'; break; case 'my_password': $pre .= $default_pre .= 'my_password.htm'; break; case 'my_bind': $pre .= $default_pre .= 'my_bind.htm'; break; case 'my_avatar': $pre .= $default_pre .= 'my_avatar.htm'; break; case 'home_article': $pre .= $default_pre .= 'home_article.htm'; break; case 'home_comment': $pre .= $default_pre .= 'home_comment.htm'; break; case 'user': $pre .= $default_pre .= 'user.htm'; break; case 'user_login': $pre .= $default_pre .= 'user_login.htm'; break; case 'user_create': $pre .= $default_pre .= 'user_create.htm'; break; case 'user_resetpw': $pre .= $default_pre .= 'user_resetpw.htm'; break; case 'user_resetpw_complete': $pre .= $default_pre .= 'user_resetpw_complete.htm'; break; case 'user_comment': $pre .= $default_pre .= 'user_comment.htm'; break; case 'single_page': $pre .= $default_pre .= 'single_page.htm'; break; case 'search': $pre .= $default_pre .= 'search.htm'; break; case 'operate_sticky': $pre .= $default_pre .= 'operate_sticky.htm'; break; case 'operate_close': $pre .= $default_pre .= 'operate_close.htm'; break; case 'operate_delete': $pre .= $default_pre .= 'operate_delete.htm'; break; case 'operate_move': $pre .= $default_pre .= 'operate_move.htm'; break; case '404': $pre .= $default_pre .= '404.htm'; break; case 'read_404': $pre .= $default_pre .= 'read_404.htm'; break; case 'list_404': $pre .= $default_pre .= 'list_404.htm'; break; default: $pre .= $default_pre .= theme_mode_pre(); break; } if ($config['theme']) { $conffile = APP_PATH . 'view/template/' . $config['theme'] . '/conf.json'; $json = is_file($conffile) ? xn_json_decode(file_get_contents($conffile)) : array(); } !empty($json['installed']) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . ($id ? $id . '_' : '') . $pre; (empty($path_file) || !is_file($path_file)) and $path_file = APP_PATH . 'view/template/' . $config['theme'] . '/htm/' . $pre; if (!empty($config['theme_child']) && is_array($config['theme_child'])) { foreach ($config['theme_child'] as $theme) { if (empty($theme) || is_array($theme)) continue; $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . ($id ? $id . '_' : '') . $pre; !is_file($path_file) and $path_file = APP_PATH . 'view/template/' . $theme . '/htm/' . $pre; } } !is_file($path_file) and $path_file = APP_PATH . ($dir ? 'plugin/' . $dir . '/view/htm/' : 'view/htm/') . $default_pre; return $path_file; } function theme_mode_pre($type = 0) { global $config; $mode = $config['setting']['website_mode']; $pre = ''; if (1 == $mode) { $pre .= 2 == $type ? 'portal_category.htm' : 'portal.htm'; } elseif (2 == $mode) { $pre .= 2 == $type ? 'flat_category.htm' : 'flat.htm'; } else { $pre .= 2 == $type ? 'index_category.htm' : 'index.htm'; } return $pre; } ?>vuejs3 - Nuxt + Firebase Auth - making requests after signOut - Stack Overflow
最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

vuejs3 - Nuxt + Firebase Auth - making requests after signOut - Stack Overflow

programmeradmin27浏览0评论

I'm using Vue3 and Nuxt3 for a dashboard. I'm currently using the VueFire Nuxt plugin to handle Firebase Authentication.

I have a logout button that signs the user out and then routes to the login page. When I click the logout button, I get redirected, but errors are thrown because the API requests I make on the homepage are getting called again, and since there is no signed in user, the request fails.

This is a minimum, reproducible example of the error:

pages/test.vue

<script setup>
definePageMeta({
  layout: "default",
  pageType: "loggedIn",
});
import { signOut } from "@firebase/auth";
import axios from "axios";

const request_response = ref(0);
watchEffect(() => {
  getCurrentUser()
    .then((user) => {
      return user.getIdToken();
    })
    .then((access_token) => {
      let request = {
        url: ";,
        method: "GET",
        headers: {
          authorization: "Bearer " + access_token,
        },
      };
      return axios(request);
    })
    .then((response) => {
      request_response.value = response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

const auth = useFirebaseAuth();
async function logout() {
  await signOut(auth);
  await navigateTo("/authentication/login");
}
</script>

<template>
  <div>
    <section>
      <v-row class="py-0">
        <v-btn @click="logout">logout</v-btn>
        <div>{{ request_response }}</div>
      </v-row>
    </section>
  </div>
</template>

When the logout button is pressed, I get redirect to the login page, and the following error is thrown: user is null (line 29 of test.vue)

This is my Nuxt config file:

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: false },
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    "nuxt-vuefire",
  ],
  vite: {
    server: {
      hmr: {
        overlay: false,
      },
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  vuefire: {
    auth: {
      enabled: true,
    },
    config: {
      apiKey: ...,
      authDomain: ...,
      projectId: ...,
      storageBucket: ...,
      messagingSenderId: ...,
      appId: ...,
    },
  }
});

I don't have any middleware implemented at the moment.

Is there a step I'm missing before redirecting to login?

Any help would be appreciated! Thanks in advance.

I'm using Vue3 and Nuxt3 for a dashboard. I'm currently using the VueFire Nuxt plugin to handle Firebase Authentication.

I have a logout button that signs the user out and then routes to the login page. When I click the logout button, I get redirected, but errors are thrown because the API requests I make on the homepage are getting called again, and since there is no signed in user, the request fails.

This is a minimum, reproducible example of the error:

pages/test.vue

<script setup>
definePageMeta({
  layout: "default",
  pageType: "loggedIn",
});
import { signOut } from "@firebase/auth";
import axios from "axios";

const request_response = ref(0);
watchEffect(() => {
  getCurrentUser()
    .then((user) => {
      return user.getIdToken();
    })
    .then((access_token) => {
      let request = {
        url: "https://api.test/request",
        method: "GET",
        headers: {
          authorization: "Bearer " + access_token,
        },
      };
      return axios(request);
    })
    .then((response) => {
      request_response.value = response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

const auth = useFirebaseAuth();
async function logout() {
  await signOut(auth);
  await navigateTo("/authentication/login");
}
</script>

<template>
  <div>
    <section>
      <v-row class="py-0">
        <v-btn @click="logout">logout</v-btn>
        <div>{{ request_response }}</div>
      </v-row>
    </section>
  </div>
</template>

When the logout button is pressed, I get redirect to the login page, and the following error is thrown: user is null (line 29 of test.vue)

This is my Nuxt config file:

import vuetify, { transformAssetUrls } from "vite-plugin-vuetify";

export default defineNuxtConfig({
  compatibilityDate: "2024-11-01",
  devtools: { enabled: false },
  build: {
    transpile: ["vuetify"],
  },
  modules: [
    "nuxt-vuefire",
  ],
  vite: {
    server: {
      hmr: {
        overlay: false,
      },
    },
    vue: {
      template: {
        transformAssetUrls,
      },
    },
  },
  vuefire: {
    auth: {
      enabled: true,
    },
    config: {
      apiKey: ...,
      authDomain: ...,
      projectId: ...,
      storageBucket: ...,
      messagingSenderId: ...,
      appId: ...,
    },
  }
});

I don't have any middleware implemented at the moment.

Is there a step I'm missing before redirecting to login?

Any help would be appreciated! Thanks in advance.

Share Improve this question asked Jan 15 at 1:06 radishhorseradishhorse 356 bronze badges 1
  • 1 the watcher will run anytime a dependency changes, i.e. when user becomes defined OR undefined. it's good practice to check if a variable is null/undefined before trying to use it. a simple if statement will prevent improper requests. – yoduh Commented Jan 15 at 4:14
Add a comment  | 

1 Answer 1

Reset to default 0

Seems like watchEffect is triggered when the component is mounted, and it continues to run even after the user logs out.

What you can do is to unwatch/stop the watchEffect before calling signOut.

Here's how you can unwatch a watcher. For more go to the docs

<script setup>
definePageMeta({
  layout: "default",
  pageType: "loggedIn",
});
import { signOut } from "@firebase/auth";
import axios from "axios";

const request_response = ref(0);

const unwatch = watchEffect(() => {
  getCurrentUser()
    .then((user) => {
      return user.getIdToken();
    })
    .then((access_token) => {
      let request = {
        url: "https://api.test/request",
        method: "GET",
        headers: {
          authorization: "Bearer " + access_token,
        },
      };
      return axios(request);
    })
    .then((response) => {
      request_response.value = response.data;
    })
    .catch((error) => {
      console.error(error);
    });
});

const auth = useFirebaseAuth();
async function logout() {
  unwatch()
  await signOut(auth);
  await navigateTo("/authentication/login");
}
</script>
发布评论

评论列表(0)

  1. 暂无评论