Nuxt 3：如何为认证用户在页面加载前仅执行一次API数据加载函数

核心逻辑 #

通过Pinia状态管理存储元数据与加载状态，结合全局路由中间件在页面加载前判断用户认证状态，仅在首次满足条件时调用API获取数据，确保接口只请求一次。

具体实现步骤 #

1. 用Pinia创建元数据状态仓库

创建一个Pinia store来保存元数据、标记加载状态，并封装API调用逻辑：

// stores/metadata.ts
import { defineStore } from 'pinia'

// 可根据实际业务定义数据类型
interface Country {
  id: number
  name: string
}

interface State {
  id: number
  name: string
  countryId: number
}

export const useMetadataStore = defineStore('metadata', {
  state: () => ({
    countries: [] as Country[],
    states: [] as State[],
    isLoaded: false
  }),
  actions: {
    async fetchMetadata() {
      // 已加载则直接返回，避免重复调用
      if (this.isLoaded) return
      
      // 调用后端API获取元数据
      const { data, error } = await useFetch('/api/metadata')
      
      if (error.value) {
        console.error('加载元数据失败:', error.value)
        return
      }
      
      if (data.value) {
        this.countries = data.value.countries
        this.states = data.value.states
        this.isLoaded = true
      }
    }
  }
})

2. 全局路由中间件触发加载

创建全局路由中间件，在每个页面加载前检查用户认证状态与元数据加载状态，满足条件则触发API请求：

// middleware/load-metadata.global.ts
export default defineNuxtRouteMiddleware(async () => {
  // 获取用户认证状态（替换为你的认证逻辑，比如自定义Auth Store或Nuxt Auth）
  const authStore = useAuthStore()
  const metadataStore = useMetadataStore()

  // 仅当用户已认证且元数据未加载时执行
  if (authStore.isAuthenticated && !metadataStore.isLoaded) {
    await metadataStore.fetchMetadata()
  }
})

3. 认证状态的适配

确保你的认证状态逻辑可靠：

• 若使用Nuxt Auth模块，可通过const { status } = useAuth()判断，status.value === 'authenticated'即为已登录状态
• 若自定义认证体系，需在Auth Store中维护isAuthenticated等状态，确保路由跳转时状态实时可用

额外优化说明 #

• 全局中间件会在客户端与服务端路由跳转时均执行，覆盖页面刷新、路由切换等所有场景
• 若需页面刷新后仍保留元数据，可结合pinia-plugin-persistedstate插件实现状态持久化，避免重复调用API

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