admin管理员组文章数量:1322029
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 Answer
Reset to default 0Seems 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>
本文标签: vuejs3NuxtFirebase Authmaking requests after signOutStack Overflow
版权声明:本文标题:vuejs3 - Nuxt + Firebase Auth - making requests after signOut - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742109983a2421201.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
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