Nuxt SSR调用Laravel认证后API无服务端请求问题求助

背景 #

• 熟悉Vue3单页应用(SPA)+Laravel后端开发，刚接触SSR技术，使用laravel-nuxt模板搭建新项目
• 网站内容需登录后访问，且所有内容无个性化差异，希望部分API请求在服务端完成

问题现象 #

• 模板自带的app.ts插件可在客户端正常设置Bearer Token、baseUrl及安全头信息，但服务端请求异常
• 页面路由跳转时客户端能正常渲染数据，但硬刷新页面时，服务端未发起/betting/picks请求
• 服务端请求仅调用betting/picks，未携带baseUrl，推测也未设置请求头
• 替换为公开JSON接口时服务端请求可正常工作；即使关闭后端认证，问题仍存在

相关代码 #

Pinia Store（数据获取逻辑） #

import { defineStore } from "pinia";
import type { BettingPick } from "~/models/BettingPick";
import { setTTL } from "~/utils/date-helper";

export const usePickStore = defineStore({
  id: "pick",
  state: () => ({
    picks: [] as BettingPick[],
    ttl: setTTL(0),
  }),
  getters: {
    getPicks: (state) => {
      return () => {
        const picks = state.picks;
        const ttl = state.ttl;
        if (picks.length > 0 && ttl > new Date()) {
          console.log("yay");
          // 数据存在且TTL有效时返回
          return picks;
        } else {
          // 数据缺失或TTL失效时重新获取
          console.log("Noo");
          usePickStore()
            .fetchPicks()
            .then((picks) => {
              console.log("hmm");
            })
            .finally(() => {
              return state.picks;
            });
        }
      };
    },
  },
  actions: {
    async fetchPicks() {
      const { data }: any = await useFetch("/betting/picks", { server: true });
      if (data.value) {
        this.picks = data.value.data;
        this.ttl = setTTL(5);
      }
    },
  },
});

组件代码 #

<script setup lang="ts">
import { usePickStore } from "~/stores/BettingPickStore";

// const count = await useFetch("betting/picks")

const store = usePickStore();
const { getPicks } = store;
const picks = computed(() => usePickStore().picks);

await callOnce(getPicks);
</script>
<template>
  <div class="grid">
    <div class="flex flex-column">
      <template v-for="pick in picks" :key="pick.id">
        <div>{{ pick?.matchup }}</div>
      </template>
    </div>
  </div>
</template>

求助需求 #

请帮忙判断该需求是否可行，或指出我忽略的关键点。

内容的提问来源于stack exchange，提问作者phpNoobish