Vue3集成Auth0时useAuth0相关解构错误求助

问题现象 #

将 Auth0 官方 Vue.js+API 示例代码合并到自有 Vue3 项目后，访问需要认证的页面时出现以下错误：

index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure property 'getAccessTokenSilently' of 'Object(...)(...)' as it is undefined.

尝试官方文档中的登录示例代码时，同样报错：

index.vue?4db4:11 Uncaught (in promise) TypeError: Cannot destructure property 'loginWithRedirect' of 'Object(...)(...)' as it is undefined. at setup (index.vue?4db4:11:1)

相关代码 #

问题页面代码（获取受保护资源） #

<script>
import Layout from "../../../layouts/main.vue";
import { getProtectedResource } from "@/services/message.service";
import { ref } from "vue";

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

const message = ref("");

const getMessage = async () => {
  const { getAccessTokenSilently } = useAuth0();
  const accessToken = await getAccessTokenSilently();
  const { data, error } = await getProtectedResource(accessToken);

  if (data) {
    message.value = JSON.stringify(data, null, 2);
  }

  if (error) {
    message.value = JSON.stringify(error, null, 2);
  }
};

getMessage();

export default {
  components: {
    Layout
  },
  data() {
    return {
    
    };
  },
  methods: {
    rightcolumn() {
      if (document.querySelector('.layout-rightside-col').classList.contains('d-none')) 
{
      document.querySelector('.layout-rightside-col').classList.remove('d-none')
      } else {
      document.querySelector('.layout-rightside-col').classList.add('d-none')
      }
    }
  }

};
</script>

<template>
<Layout>
  <p id="page-description">
        <span
          >This page retrieves a <strong>protected message</strong> from an
          external API.</span
        >
        <span
          ><strong
            >Only authenticated users can access this page.</strong
          ></span
        >
      </p>
      <CodeSnippet title="Protected Message" :code="message" />
</Layout>
</template>

官方登录示例代码 #

<script>
  import Layout from "../../../layouts/main.vue";
  import { useAuth0 } from "@auth0/auth0-vue";

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

      return {
        login: () => {
          loginWithRedirect();
        }
      };
    },
    components: {
      Layout
    },
    data() {
      return {
       
      };
    },
    methods: {
      rightcolumn() {
        if (document.querySelector('.layout-rightside-col').classList.contains('d-none')) {
          document.querySelector('.layout-rightside-col').classList.remove('d-none')
        } else {
          document.querySelector('.layout-rightside-col').classList.add('d-none')
        }
      }
    }
}
</script>

main.js 中 Auth0 插件注册代码 #

createApp(App)
    .use(store)
    .use(router)
    .use(VueApexCharts)
    .use(BootstrapVue3)
    .component(VueFeather.type, VueFeather)
    .use(Maska)
    .use(Particles)
    .use(i18n)
    .use(
        createAuth0({
          domain: 'xyz.auth0.com',
          client_id: 'secret',
          redirect_uri: 'http://localhost:4040/callback',
          audience: 'https://audience',
        })
      )
    .use(vClickOutside).mount('#app');

package.json 依赖核心部分 #

{
  "dependencies": {
    "@auth0/auth0-vue": "^1.0.2",
    "vue": "^3.2.36"
  }
}

原因分析与解决方法 #

核心原因 #

useAuth0() 返回 undefined 通常由两个问题导致：

• 组件不在 Auth0 插件的作用域范围内
• useAuth0 被调用的时机错误（比如在 Vue setup 函数外部调用）

针对性解决步骤 #

1. 确保 useAuth0 在 setup 函数内部调用

第一个问题代码中，getMessage 直接在 script 顶层调用，此时组件未挂载，无法获取 Auth0 上下文。需将逻辑移到 setup 内，并使用生命周期钩子触发：

<script>
import Layout from "../../../layouts/main.vue";
import { getProtectedResource } from "@/services/message.service";
import { ref, onMounted } from "vue";
import { useAuth0 } from "@auth0/auth0-vue";

export default {
  components: {
    Layout
  },
  setup() {
    const message = ref("");
    const { getAccessTokenSilently } = useAuth0();

    const getMessage = async () => {
      try {
        const accessToken = await getAccessTokenSilently();
        const { data, error } = await getProtectedResource(accessToken);
        message.value = data ? JSON.stringify(data, null, 2) : JSON.stringify(error, null, 2);
      } catch (err) {
        message.value = JSON.stringify(err, null, 2);
      }
    };

    onMounted(() => {
      getMessage();
    });

    return { message };
  },
  methods: {
    rightcolumn() {
      const el = document.querySelector('.layout-rightside-col');
      el.classList.toggle('d-none');
    }
  }
};
</script>

2. 检查插件注册与作用域

确认所有页面组件都挂载在 createApp 创建的根实例下，Auth0 插件已正确注册（当前代码中的注册逻辑无问题）。

3. 升级 Auth0 依赖版本

当前使用的 @auth0/auth0-vue 1.0.2 版本虽兼容 Vue3，但可尝试升级到最新稳定版排除版本兼容问题：

npm update @auth0/auth0-vue

4. 配置路由守卫（可选）

如果页面需要强制认证，可在路由中添加 Auth0 守卫：

// router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import { useAuth0 } from '@auth0/auth0-vue';

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/protected',
      name: 'Protected',
      component: () => import('../views/Protected.vue'),
      beforeEnter: (to, from, next) => {
        const { isAuthenticated } = useAuth0();
        if (!isAuthenticated.value) {
          next('/login');
        } else {
          next();
        }
      }
    }
  ]
});

export default router;

验证方法 #

修改代码后重启开发服务器：

1. 未登录状态下访问受保护页面，应自动跳转到 Auth0 登录页
2. 登录成功后，可正常获取访问令牌并调用受保护 API

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