Auth0和Vue:渲染函数出错:"InvalidTokenError:指定了无效的标记:无法读取未定义的属性'replace'"

Question

伙计们,我正在浏览Auth0的VueJS教程,我收到了这个错误:

InvalidTokenError {message: "Invalid token specified: Cannot read property 'replace' of undefined"}
message:"Invalid token specified: Cannot read property 'replace' of undefined"

教程如下:

https://auth0.com/blog/vuejs2-authentication-tutorial/

当应用程序调出Auth0 Lock小部件时,错误就会发生.

思考？

Answer 1

清除浏览器的本地存储缓存.例如,对于Chrome,按F12进入开发者窗口,存储\本地存储,右键单击并清除.对于IE,F12到开发人员窗口.在"控制台"选项卡上,运行该命令

localStorage.clear()

Answer 2

对不起，我不能评论你的问题，因为我的等级太低了。当我按照你教程的反应版本进行操作时，我遇到了同样的错误。

我的问题是由于auth.js文件中存在一个名为getTokenExpirationDate(encodedToken). 在该函数中，该行const token = decode(encodedToken);是导致错误的原因。

通过调查 encodeToken 的值，我发现它的值是一个包含字符'none',的字符串（不是值 none 本身！）。这让 encode 函数很不爽。

如果您进入 Chrome 开发人员工具，请单击“应用程序”选项卡，打开左侧的“本地存储”选项并选择您的站点。您将能够看到存储在您的应用程序的本地存储中的所有键值对。在我的情况下，密钥id_token具有 value none。如果您也是这种情况，只需从本地存储中删除该键/值对，页面应该能够再次加载。

希望这有帮助，祝你好运！

编辑 通过使用 chrome 开发人员工具使用本地存储，我意识到本地存储可能有点问题。有时我尝试查看本地存储但它没有出现。发生这种情况时，请尝试关闭并重新打开该工具。