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

时间:2017-05-10 08:09:30

标签: vuejs2 auth0

伙计们,我正在浏览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小部件时,会发生错误。

思想?

5 个答案:

答案 0 :(得分:14)

清除浏览器的本地存储缓存。 例如 对于Chrome,按F12进入开发人员窗口,存储\本地存储,右键单击并清除。 对于IE,F12到开发人员窗口。 On' Console'选项卡,运行命令

localStorage.clear()

答案 1 :(得分:4)

抱歉,我无法对你的问题发表评论,因为我的排名太低了。当我按照教程的反应版本时,我遇到了同样的错误。

我的案例中的问题是由于auth.js文件中有一个名为getTokenExpirationDate(encodedToken)的函数。在该函数内部,行const token = decode(encodedToken);是该错误的原因。

通过调查encodedToken的值,我发现它的值是一个字符为'none'的字符串,(不是值本身!)。这使得编码功能非常不满意。

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

希望这有帮助并祝你好运!

修改 通过使用chrome开发人员工具使用本地存储,我意识到本地存储可能有点儿麻烦。有时我尝试查看本地存储但它没有出现。当发生这种情况时,只需尝试关闭并重新打开该工具。

答案 2 :(得分:1)

我也遇到了这个问题。我有一条规则叫做#auth0-authorization-extension'已激活,触发了此错误。

答案 3 :(得分:0)

这为我解决了。它是在打字稿中。如果不使用TS,则可以将(令牌:字符串)删除为(令牌)

function parseJwt (token: string) {
    var base64Url = token.split('.')[0];
    var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');
    var jsonPayload = decodeURIComponent(atob(base64).split('').map(function(c) {
        return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);
    }).join(''));

    return JSON.parse(jsonPayload);
};

答案 4 :(得分:0)

如果你在其他地方有令牌,你可以在 cookie 中复制令牌。

  1. 您可以在 Insomia 软件中找到您的令牌。
  2. 你可以复制它
  3. 返回浏览器并使用 F12 打开检查
  4. 打开 cockies 并在那里粘贴令牌