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

我有一个基于Auth0的quickstart应用之一的Vue SPA（）。一切都在开箱即用的情况下运行良好，但只要我尝试在组件代码中使用Auth0客户端，我就会遇到问题。我遵循了“调用API”教程（），该教程只显示了如何使用按钮调用API，这是毫无帮助的。我想做的是在初始页面加载时触发对我的API的经过身份验证的调用，这样我就可以确保某些数据存在于我自己的API中（或者如果它不存在，就创建它）。这看起来应该很简单。我只是在我创建的Vue组件挂钩中抛出以下代码：

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

如果应用程序热从我的npm dev服务器重新加载，它会接触到我的API，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生命周期挂钩（创建、安装前、安装等）中，所有这些都得到了相同的结果。客户机在800毫秒左右后可用，但在执行此代码时不可用

---

这显然是一个计时问题，但我不清楚如何告诉我的组件代码等待。Auth0客户端为非空，而不执行诸如setInterval之类的可怕和骇人听闻的操作。

我现在想出了一个解决方法，我将添加它作为一个答案，以防其他人有此问题，虽然这不是我想要的答案。根据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
        });
    }
}

---

虽然不太理想，但确实有效。

遗憾的是，即使是auth0团队，我们也没有其他选择。。谢谢你，亚当！确实有点令人失望，不是吗？希望他们能在不久的将来解决这个问题。