Nuxt auth getToken witnin async 未定义答案

【问题标题】：Nuxt auth getToken witnin async is undefinedNuxt auth getToken witnin async 未定义
【发布时间】：2019-07-06 14:38:52
【问题描述】：

我正在尝试从用户那里获取一些数据，我需要在调用中传递不记名令牌。

async asyncData () {
    let response = await axios.get('dataURL', {}, { headers: {"Authorization" : `Bearer ${this.$auth.getToken('local')}`} })
  },

但这不起作用，它总是说 $auth 未定义，而在模板中我可以轻松输出任何 $auth 属性...

如何在异步中获取不记名令牌？

【问题讨论】：

确保this 是您认为的那样。
@Titus 好的，这在异步中不可用。如何获取从 nuxt/auth 模块设置的 cookie？
您可以在async 函数中使用this。您可以使用bind 或call 或apply 设置函数的上下文（this 在函数内部引用的内容）。这是一个示例：someObject.asyncData.call(objectWith$authProp)

标签： javascript vue.js nuxt.js

【解决方案1】：

@Titus 说得对，“这个”就是问题所在。您在 asyncData 中没有可用的“this”，因为：

您无法通过 this 内部访问组件实例 asyncData，因为它是在启动组件之前调用的。

您确实可以访问“上下文”，因此您可以使用它来调用 auth 模块：

async asyncData (context) {
    let response = await axios.get('dataURL', {}, { headers: {"Authorization" : `Bearer ${context.app.$auth.getToken('local')}`} })
  },

nuxtjs/Authdocs

但是，您仍然没有按应有的方式使用 asyncData，因为您没有返回可以与数据合并的任何内容，因此您可能想尝试这样：

async asyncData (context) {
    let { response } = await axios.get('dataURL', {}, { headers: {"Authorization" : `Bearer ${context.app.$auth.getToken('local')}`} })
    return { token: response }
  },

话虽如此，我真的不明白您为什么要在组件中获取令牌。当然，您最好通过商店中的 nuxtServerInit 在全球范围内获取它。

【讨论】：

【解决方案2】：

也许您可以在通话后尝试传递上下文 (this)？
例如：

await axios.get('dataURL', {}, { headers: {"Authorization" : `Bearer ${this.$auth.getToken('local')}`} }),this;

【讨论】：

【解决方案3】：

你可以使用类似的东西：

async asyncData (app) {
    let response = await axios.get('dataURL', {}, { headers: {"Authorization" : `Bearer ${app.$auth.getToken('local')}`} });
},

Here是文档，你可以了解更多。

【讨论】：