首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >Vue3 - Pinia + Auth0 - isAuthenticated总是假的

Vue3 - Pinia + Auth0 - isAuthenticated总是假的
EN

Stack Overflow用户
提问于 2022-11-22 16:47:25
回答 1查看 72关注 0票数 1

我正在开发一个vue3应用程序,使用pinia作为州管理器,auth0作为创作提供者。

在我的vue路由器中,我有以下代码来管理身份验证:

代码语言:javascript
运行
复制
router.beforeEach(async (to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) => {
    const authStore = useAuthStore();
    const isLogged = authStore.isLogged();
    if (!isLogged) await handleNotLogged(to, from, next);
    else await handleLogged(to, from, next);
});

async function handleNotLogged(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {
    const authStore = useAuthStore();
    if (to?.query?.code && to?.query?.state) {
        next({ name: '/logged/home' });
    } else {
        await authStore.login();
    }
}
async function handleLogged(to: RouteLocationNormalized, from: RouteLocationNormalized, next: NavigationGuardNext) {next()}

这是我的authStore

代码语言:javascript
运行
复制
import { defineStore } from 'pinia';
import { User } from '@models/user';
import { useStorage } from '@vueuse/core';
import { RouteLocation } from 'vue-router';
import { createAuth0 } from '@auth0/auth0-vue';
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}`,
});

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),
        authService,
    }),
    actions: {
        isLogged(): boolean {
            try {
                return this.authService.isAuthenticated;
            } catch (error) {
                return false;
            }
        },
        async login(): Promise<boolean> {
            try {
                await this.authService.loginWithRedirect();
                return true;
            } catch (error) {
                console.error(error);
                return false;
            }
        },
        async logout(): Promise<boolean> {
            try {
                await this.authService.logout();
                return true;
            } catch (error) {
                console.error(error);
                return false;
            }
        },
    },
});

还有我的main.ts

代码语言:javascript
运行
复制
import App from './App.vue';
import { createApp } from 'vue';
import { createPinia } from 'pinia';
import { registerPlugins } from '@plugins';
import { useAuthStore } from '@store/auth';
import router from '@router';
import vuetify from './plugins/vuetify';

async function main() {
    const app = createApp(App);
    registerPlugins();
    const pinia = createPinia();
    app.use(pinia);
    const authStore = useAuthStore();
    const { authService } = authStore;
    app.use(authService);
    app.use(router);
    app.use(vuetify).mount('#app');
}
main();

问题是,每次触发beforeEach时,auth0 isAuthenticated都会返回false。即使我刚刚成功地记录了。

我已经搜索了一些答案,有些人说,当查询参数中有代码和状态时,我们应该调用auth0.handleRedirectCallback,但是方法中有这样的注释:

注意:除非您将skipRedirectCallback设置为true,否则Auth0-Vue SDK将为您处理此问题。在这种情况下,请确保自己显式地调用handleRedirectCallback。

PS: auth0中的应用程序配置为单页应用程序

EN

回答 1

Stack Overflow用户

发布于 2022-11-22 20:02:13

这个问题已经有了答案,我相信这个问题可以帮助你:Auth0 isAuthenticated() is always false

票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/74536256

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档