我正在开发一个vue3应用程序,使用pinia作为州管理器,auth0作为创作提供者。
在我的vue路由器中,我有以下代码来管理身份验证:
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
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
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中的应用程序配置为单页应用程序
发布于 2022-11-22 20:02:13
这个问题已经有了答案,我相信这个问题可以帮助你:Auth0 isAuthenticated() is always false
https://stackoverflow.com/questions/74536256
复制相似问题