Vue3+Pinia+Auth0：isAuthenticated始终返回false问题求助

问题核心 #

登录成功后，router.beforeEach中isAuthenticated始终返回false，根源在于：

• Auth0实例未与Vue应用生命周期同步，状态更新延迟
• 路由守卫未等待Auth0初始化完成就判断登录状态
• 提前跳转打断了SDK自动处理登录回调的流程

修复步骤 #

1. 重构AuthStore，使用官方Composable

移除Store内自行创建的authService，改用Auth0-Vue提供的useAuth0()获取实例，保证状态与Vue应用同步：

import { defineStore } from 'pinia';
import { User } from '@models/user';
import { useStorage } from '@vueuse/core';
import { RouteLocation } from 'vue-router';
import { useAuth0 } from '@auth0/auth0-vue';

const defaultUserData = {} as User;
const defaultLastRoute = { path: '/' } as RouteLocation;

export const useAuthStore = defineStore('AuthStore', {
    state: () => ({
        userData: useStorage('userData', defaultUserData, localStorage),
        lastRoute: useStorage('lastRoute', defaultLastRoute, localStorage),
    }),
    actions: {
        isLogged(): boolean {
            try {
                const { isAuthenticated } = useAuth0();
                return isAuthenticated.value;
            } catch (error) {
                return false;
            }
        },
        async login(): Promise<boolean> {
            try {
                const { loginWithRedirect } = useAuth0();
                await loginWithRedirect();
                return true;
            } catch (error) {
                console.error(error);
                return false;
            }
        },
        async logout(): Promise<boolean> {
            try {
                const { logout } = useAuth0();
                await logout();
                return true;
            } catch (error) {
                console.error(error);
                return false;
            }
        },
    },
});

2. 调整Main.ts的初始化顺序

把Auth0实例的创建和挂载放在最前面，确保它先于Pinia、路由完成初始化：

import App from './App.vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { registerPlugins } from '@plugins';
import router from '@router';
import vuetify from './plugins/vuetify';
import { createAuth0 } from '@auth0/auth0-vue';

async function main() {
    const app = createApp(App);
    registerPlugins();

    // 先初始化Auth0
    const authService = createAuth0({
        domain: import.meta.env.VITE_APP_AUTH_URL,
        client_id: import.meta.env.VITE_APP_AUTH_CLIENT_ID,
        redirect_uri: `${window.location.origin}`,
    });
    app.use(authService);

    // 再挂载Pinia和路由
    const pinia = createPinia();
    app.use(pinia);
    app.use(router);
    
    app.use(vuetify).mount('#app');
}
main();

3. 修改路由守卫，等待Auth0初始化

必须等Auth0完成初始化（isLoading变为false）后，再判断登录状态，避免拿到初始的false值：

import { useAuth0 } from '@auth0/auth0-vue';

router.beforeEach(async (to, from, next) => {
    const { isLoading, isAuthenticated } = useAuth0();

    // 等待Auth0初始化完成
    while (isLoading.value) {
        await new Promise(resolve => setTimeout(resolve, 100));
    }

    if (!isAuthenticated.value) {
        await handleNotLogged(to, from, next);
    } else {
        next();
    }
});

async function handleNotLogged(to, from, next) {
    const { loginWithRedirect, isAuthenticated } = useAuth0();
    
    // 存在code和state时，SDK会自动处理回调，不要直接跳转
    if (to.query.code && to.query.state) {
        // 等待回调处理完成
        await new Promise(resolve => setTimeout(resolve, 500));
        if (isAuthenticated.value) {
            next({ name: 'logged-home' }); // 这里用路由定义的name，不是路径
        } else {
            await loginWithRedirect();
        }
    } else {
        await loginWithRedirect();
    }
}

额外注意事项 #

• 确认Auth0控制台的Allowed Callback URLs包含你的redirect_uri（即当前域名）
• 路由跳转时用路由定义的name，不要直接写路径，避免匹配错误
• 不要手动调用handleRedirectCallback，SDK默认会自动处理，除非你设置了skipRedirectCallback: true

内容的提问来源于stack exchange，提问作者Vinicius Andrade