Nuxt asyncData 无法从授权的快速路线中提取

Question

建立电子商务商店。从产品开始，不需要授权即可拉取，但需要授权才能编辑。这工作正常，我怀疑这是因为这是在客户端上发生的，它直接从客户端发送所有请求的身份验证信息（即方法挂钩）。

但是，订单数据确实需要授权才能访问其中的任何数据。我无法访问此路由以使用 asyncData 生成页面。我怀疑这是因为它发生在 Nuxt 服务器上而不是客户端上。

  async asyncData({ $config: { apiURL } }) {
      let orders = await axios.get(
          `${apiURL}/orders`
      );
      return { orders: orders.data.data };
  },

正确的做法是什么？设置一个空数据点然后使用mounted或created来拉取和设置？

更新：我把它作为一种方法使用，但是你必须按下按钮才能提取所有订单，这是非常糟糕的用户体验哈哈怎么办

Answer 1

成功了，这就是我所做的：

  data: () => ({
    orders: []
  }),
  mounted() {
    this.$axios.$get(`${this.$config.apiURL}/orders`).then( res => {
      this.orders = res.data
    })
  },

如果有更好的方法，请告诉我

Answer 2

另一种解决方案是

<template>
  <section>
    <div v-for="user in users" :key="user.id">
      {{ user.name }}
    </div>
  </section>
</template>

<script>
export default {
  async asyncData({ $axios, $config: { jsonPlaceholder } }) {
    const fetchedUsers = await $axios.$get(`${jsonPlaceholder}/users`)
    return { users: fetchedUsers }
  },
  data() {
    return {
      users: [],
    }
  },
}
</script>

这里以 JSONplaceholder 为例，在您的情况下，您可以像最初一样添加额外的 data。

此解决方案的好处是在调用完成之前阻止页面呈现（mounted() 不能）。

Nuxt asyncData 无法从授权的快速路线中提取

Nuxt asyncData not able to pull from authorized express routes

javascript

node.js

vue.js

nuxt.js