页面刷新时 Vue SPA 中的 Auth0 客户端为空

Question

我有一个基于 Auth0 的快速入门应用程序之一的 Vue SPA (https://github.com/auth0-samples/auth0-vue-samples)。开箱即用一切正常，但是一旦我尝试在我的组件代码中使用 Auth0 客户端，我就会遇到问题。我遵循了“调用 API”教程 (https://auth0.com/docs/quickstart/spa/vuejs/02-calling-an-api)，该教程仅展示了如何使用按钮调用 API。我想要做的是在初始页面加载时触发对我的 API 的经过身份验证的调用，以便我可以确保某些数据存在于我自己的 API 中（或者如果不存在则创建它）。这似乎应该很简单。我只是将这段代码放入我创建的 Vue 组件钩子中：

await this.$auth.getTokenSilently().then((authToken) => {
    // reach out to my API using authToken
});

如果应用程序从我的 npm 开发服务器热重新加载，这实际上可以正常工作，它会到达我的 API，它使用令牌授权请求，并发回正确的数据。问题是当我手动重新加载页面时，这会导致：

Uncaught (in promise) TypeError: Cannot read property 'getTokenSilently' of null
    at Vue.getTokenSilently (authWrapper.js?de49:65)
    at _callee$ (App.vue?234e:49)

在 authWrapper.js 文件中（Auth0 客户端所在的位置），函数调用在这里：

getTokenSilently(o) {
    return this.auth0Client.getTokenSilently(o);
}

当我调试调用时，“auth0Client”不存在，这就是它失败的原因。我无法理解的是在我尝试拨打电话之前确保它确实存在的正确方法。样本中没有任何内容表明执行此操作的正确方法。我尝试将我的组件代码放在不同的组件和不同的 Vue 生命周期钩子（created、beforeMount、mounted 等）中，结果都相同。客户端在 800 毫秒左右后变为可用，但在此代码执行时不可用。

这显然是一个时间问题，但我不清楚如何告诉我的组件代码坐下来等到 this.auth0Client 为非 null 而不做像 setInterval 之类的可怕和骇人听闻的事情。

Answer 1

我现在想出了一个解决方法，我会添加它作为答案，以防其他人遇到这个问题，尽管这并不是我真正想要的答案。根据 authGuard，您可以使用从 authWrapper 导出的“实例”并在执行取决于 auth0Client 准备就绪的代码之前观察其“加载”标志，如下所示：

import { getInstance } from "./auth/authWrapper";

// ... Vue component:
created() {
    this.init(this.doSomethingWithAuth0Client);
},
methods: {
    init(fn) {
        // have to do this nonsense to make sure auth0Client is ready
        var instance = getInstance();
        instance.$watch("loading", loading => {
            if (loading === false) {
                fn(instance);
            }
        });
    },
    async doSomethingWithAuth0Client(instance) {
        await instance.getTokenSilently().then((authToken) => {
            // do authorized API calls with auth0 authToken here
        });
    }
}

这并不理想，但确实有效。