Vue.js中Auth0 loginWithRedirect()问题：登录后卡在回调页

1. 完善Auth0Provider初始化配置 #

在应用入口文件（如main.js）初始化Auth0Provider时，必须配置onRedirectCallback函数，这是SDK处理认证后跳转的核心逻辑：

import { createAuth0 } from '@auth0/auth0-vue';
import router from './router';

const app = createApp(App);

app.use(createAuth0({
  domain: '你的Auth0域名',
  clientId: '你的Auth0客户端ID',
  authorizationParams: {
    redirect_uri: window.location.origin + '/callback' // 需与Auth0控制台配置完全一致
  },
  onRedirectCallback: (appState) => {
    // 优先使用appState中传递的目标路径，默认跳转到首页
    router.push(appState?.target || '/');
  }
}));

app.use(router);
app.mount('#app');

2. 核对Auth0控制台应用配置 #

登录Auth0管理后台，进入你的应用，确认以下配置项包含你的应用域名（如http://localhost:5173）：

• Allowed Callback URLs：必须添加回调页完整地址（如http://localhost:5173/callback）
• Allowed Logout URLs：添加应用首页地址
• Allowed Web Origins：添加应用域名

3. 通过URL参数传递目标路径（替代硬编码appState） #

如果需要从登录页的URL参数（如/login?redirectTo=/app/test）获取跳转目标，修改登录组件逻辑：

<template>
  <div>
    <q-btn label="Login" @click="login()" />
  </div>
</template>

<script>
import { useAuth0 } from "@auth0/auth0-vue";
import { useRoute } from 'vue-router';

export default {
  setup() {
    const { loginWithRedirect } = useAuth0();
    const route = useRoute();

    return {
      login: () => {
        // 读取URL参数中的redirectTo，默认值设为首页
        const target = route.query.redirectTo || '/';
        loginWithRedirect({
          appState: { target },
        });
      },
    };
  },
};
</script>

4. 简化回调页组件逻辑 #

回调页（如/callback）只需处理Auth0的认证回调，无需额外跳转代码：

<template>
  <div>Loading...</div>
</template>

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

export default {
  setup() {
    const { handleRedirectCallback } = useAuth0();
    // 组件挂载时自动处理回调，触发onRedirectCallback完成跳转
    handleRedirectCallback();
  }
};
</script>

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