时间戳

首页 > 解决方案 > Nuxt asyncData 无法从授权的快速路由中提取

javascript - Nuxt asyncData 无法从授权的快速路由中提取

问题描述

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

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

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

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

更新：我把它作为一种方法使用，但是你必须按下按钮才能拉出所有订单，这太糟糕了 ux 大声笑做什么

标签： javascriptnode.jsvue.jsnuxt.js

解决方案

另一种解决方案是

<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()此解决方案的好处是在调用完成（不能）之前阻止页面的呈现。

推荐阅读