如何在Vue中访问Laravel8 me接口返回的全局数据并解决重复请求问题

重复请求原因 #

1. Vuex的getUser动作没有做已有数据判断，每次调用都会发起新请求
2. 多处重复调用getUser（比如多个组件挂载时、路由每次跳转都无条件调用）
3. OPTIONS请求是跨域预检请求，后端未配置预检缓存，每次跨域请求都会重复触发

解决方案 #

1. 给Vuex的getUser增加缓存判断 #

修改Vuex的action逻辑，已有用户数据时直接返回，不发起新请求：

actions: {
    getUser({ commit, state }) {
        // 已存在用户数据直接返回
        if (Object.keys(state.user).length > 0) {
            return Promise.resolve()
        }
        return new Promise((resolve, reject) => {
            axios.get("http://127.0.0.1:8000/api/me", {
                headers: {
                    Authorization: `Bearer ${localStorage.getItem("token")}`,
                },
            })
                .then(result => {
                    commit('setUser', result.data);
                    resolve();
                })
                .catch(error => {
                    reject(error.response?.data?.message || 'Error.');
                });
        });
    },
}

2. 统一调用时机，避免多入口重复触发 #

仅在两个场景调用getUser即可，不要每个页面单独调用：

• 用户登录成功后调用一次
• 全局路由守卫中，仅当无用户数据时调用一次，示例：

// 路由全局前置守卫
router.beforeEach((to, from, next) => {
  const token = localStorage.getItem('token')
  if (to.meta.requireAuth && token) {
    // 仅无用户数据时发起请求
    if (Object.keys(store.state.user).length === 0) {
      store.dispatch('getUser').finally(() => next())
    } else {
      next()
    }
    return
  }
  next()
})

3. 后端配置预检缓存，消除重复OPTIONS请求 #

Laravel 8自带CORS配置文件，修改config/cors.php中的max_age参数，缓存跨域预检结果：

// config/cors.php
return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'], // 生产环境替换为你的前端域名
    'allowed_headers' => ['*'],
    'max_age' => 86400, // 预检结果缓存24小时，单位为秒
    'supports_credentials' => false,
];

修改后执行php artisan config:cache生效。

4. 可选：本地持久化用户数据 #

如果希望刷新页面也不需要重新请求，可以将用户数据存在localStorage，Vuex初始化时直接读取：

// Vuex state 初始化
state: {
    user: JSON.parse(localStorage.getItem('user') || '{}')
},
mutations: {
    setUser(state, user) {
        state.user = user;
        localStorage.setItem('user', JSON.stringify(user))
    },
    // 退出登录时调用清空数据
    clearUser(state) {
        state.user = {}
        localStorage.removeItem('user')
        localStorage.removeItem('token')
    }
},

内容的提问来源于stack exchange，提问作者Göksel Doğan