javascript - Nuxt auth getToken witnin async 未定义

Question

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

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

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

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

Answer 1

@Titus 是正确的，“这个”就是问题所在。您在 asyncData 中没有可用的“this”，因为:

You do NOT have access of the component instance through this inside asyncData because it is called before initiating the component.

但是，您确实可以访问“上下文”，因此您可以使用以下方法调用 auth 模块:

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

nuxtjs/Auth docs

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

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

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