vue.js - Nuxt : Fetching data only on server side

Question

我正在使用 Github 的 API 来获取我固定存储库的列表，并将调用放在 AsyncData 方法中，以便我在第一次渲染时拥有该列表。但我刚刚了解到 AsyncData 在 ServerSide 上调用一次，然后每次在客户端加载页面时。这意味着客户端不再拥有进行 API 调用的 token ，无论如何，我不会让我的 Github token 在客户端中。

当我切换页面(从另一个页面到带有列表的页面)时，数据不存在，我只有默认的空数组

我无法弄清楚确保我的数据始终加载在服务器端的最佳方法是什么？

export default defineComponent({
  name: 'Index',
  components: { GithubProject, Socials },
  asyncData(context: Context) {
    return context.$axios.$post<Query<UserPinnedRepositoriesQuery>>('https://api.github.com/graphql', {
      query,
    }, {
      headers: {
        // Token is defined on the server, but not on the client
        Authorization: `bearer ${process.env.GITHUB_TOKEN}`,
      },
    })
      .then((data) => ({ projects: data.data.user.pinnedItems.nodes }))
      .catch(() => {});
  },
  setup() {
    const projects = ref<Repository[]>([]);

    return {
      projects,
    };
  },
});

Answer 1

将您的请求包裹在 if(process.server)内asyncData页面的方法。

如果您绝对需要服务器端调用而不能从客户端调用，那么您可以操作 location.href强制页面完全加载。