Nuxt：仅在服务器端获取数据

Question

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

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

我不知道确保我的数据始终加载在服务器端的最佳方法是什么？

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强制页面完全加载。

Answer 2

您应该将 Vuex 与nuxtServerInit.

nuxtServerInit无论您在哪个页面，都会在首页加载时触发。因此，您应该首先导航到store/index.js.

之后创建一个状态：

export const state = () => ({
  data: []
})

现在，您创建了每当刷新页面时始终执行的操作。即使 Nuxt 位于服务器端，也可以访问该商店。

现在您需要从组件中的存储中获取数据：

export const actions = {
  async nuxtServerInit ({ state }, { req }) {
    let response = await axios.get("some/path/...");
    state.data = response.data;
  }
}

您可以将您的令牌存储在 cookie 中。Cookie 位于客户端，但nuxtServerInit有第二个参数。的请求req。这样您就可以访问标头并且还有您的 cookie。

let cookie = req.headers.cookie;