Laravel+Vue.js项目中缓存API响应数据避免重复请求的最优方案是什么？

以下是四种生产环境常用的实现方案，可根据你的业务场景选择：

方案1：IndexedDB 持久化缓存 #

这是客户端结构化存储的最优选择，优势如下：

• 遵循同源策略，安全性远高于localStorage，容量通常可达GB级别
• 属于浏览器持久化存储，页面刷新、重启浏览器都不会丢失数据
• 支持设置缓存过期时间、自定义缓存key规则，灵活度高

Vue生态可直接使用localforage库简化操作，它对IndexedDB做了上层封装，API和localStorage一致，还会自动兼容低版本浏览器降级到WebSQL/localStorage。如果存储敏感数据，可搭配crypto-js对内容做对称加密后再写入，即使数据被窃取也无法直接读取。

请求拦截示例逻辑：

// axios请求拦截器逻辑
import localforage from 'localforage'
import CryptoJS from 'crypto-js'

axios.interceptors.request.use(async (config) => {
  // 只缓存GET请求
  if (config.method !== 'get') return config
  const cacheKey = `api_cache_${btoa(config.url + JSON.stringify(config.params))}`
  const cached = await localforage.getItem(cacheKey)
  // 缓存存在且未过期直接返回
  if (cached && Date.now() < cached.expireAt) {
    // 加密存储的话这里做解密
    const data = CryptoJS.AES.decrypt(cached.data, '你的加密密钥').toString(CryptoJS.enc.Utf8)
    config.adapter = () => Promise.resolve({ data: JSON.parse(data), status: 200 })
  }
  return config
})

// axios响应拦截器逻辑
axios.interceptors.response.use(async (response) => {
  if (response.config.method === 'get') {
    const cacheKey = `api_cache_${btoa(response.config.url + JSON.stringify(response.config.params))}`
    // 缓存1小时
    const expireAt = Date.now() + 3600 * 1000
    // 加密后存储
    const encryptedData = CryptoJS.AES.encrypt(JSON.stringify(response.data), '你的加密密钥').toString()
    await localforage.setItem(cacheKey, { data: encryptedData, expireAt })
  }
  return response
})

方案2：HTTP 缓存头控制（服务端配置） #

这是成本最低的方案，无需前端修改业务代码，直接通过Laravel返回响应时设置标准HTTP缓存头即可，缓存逻辑完全由浏览器原生实现，安全性最高：

• 静态接口可设置Cache-Control头指定缓存时长，浏览器会直接读取本地缓存不发请求
• 动态接口可搭配ETag/Last-Modified做协商缓存，内容未变更时后端返回304状态码，无需返回完整响应体

Laravel配置示例：

// 控制器中返回响应时设置缓存头
return response()->json($data)
    // 缓存1小时，允许代理服务器缓存
    ->header('Cache-Control', 'public, max-age=3600')
    // 生成内容唯一标识用于协商缓存
    ->header('ETag', md5(json_encode($data)));

方案3：SessionStorage 短期缓存 #

如果你的需求仅为页面刷新时不丢失缓存，不需要跨标签页/重启浏览器保留缓存，可以使用sessionStorage：

• 同样遵循同源策略，生命周期仅和当前标签页绑定，标签页关闭后自动清空，泄露风险远低于localStorage
• API简单易用，和localStorage完全一致，敏感数据同样可加密后存储

方案4：Vuex 持久化插件（搭配安全存储介质） #

针对Vuex刷新清空的问题，可使用vuex-persistedstate插件实现持久化，不要使用默认的localStorage存储，可自定义存储介质为IndexedDB或者加密后的sessionStorage，兼顾开发体验和安全性：

import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import localforage from 'localforage'

const store = new Vuex.Store({
  // 你的Vuex模块、state、mutations等配置
  plugins: [
    createPersistedState({
      // 指定只缓存需要的API响应模块，避免存储冗余数据
      paths: ['apiCache'],
      storage: {
        getItem: (key) => localforage.getItem(key),
        setItem: (key, value) => localforage.setItem(key, value),
        removeItem: (key) => localforage.removeItem(key)
      }
    })
  ]
})

注意事项 #

• 涉及用户隐私、权限相关的高敏感数据不建议长期存储在客户端，可设置较短的缓存过期时间，或者走服务端协商缓存
• 所有客户端存储的敏感数据必须加密后再写入，加密密钥不要硬编码在前端代码中，可通过接口从后端动态获取

内容的提问来源于stack exchange，提问作者Dr.Noob