如何在使用 Angular 7 和 Spring Boot 构建的 Web 应用程序中使浏览器缓存无效

Posted 2023-02-16

【中文标题】如何在使用 Angular 7 和 Spring Boot 构建的 Web 应用程序中使浏览器缓存无效

【英文标题】：How to invalidate browser cache in a web application built with angular7 and springboot

【发布时间】：2019-04-24 17:01:52

【问题描述】：

我正在开发一个 web 应用程序，使用 springboot 作为后端服务 rest API 和 Angular7 作为前端。

我的应用程序需要很长时间才能加载，因为它必须在服务器上执行大量处理，因此我决定通过存储缓存数据来提高性能，以便首先加载页面并最终在处理时更新数据结束。

这可行，但我遇到了问题： 当我在 Angular 中更新数据时，这些数据通常保存在我的数据库中，但如果我更新页面，我看不到更改，因为浏览器会继续访问旧缓存数据，而不是修改新数据。

有没有办法让浏览器缓存中的某些数据在被修改时失效？

Springboot：

我的休息控制器端点与此类似：

  @GetMapping(value = "/users")
  public Iterable<User> getAllUsers(HttpServletResponse response) 
    response.setHeader("Cache-Control", "max-age=3600");
    return this.userService.findAll());
  

我的服务：

  @Cacheable("users")
  public Iterable<User> findAll() 
    return this.userRepository.findAll();
  

我的角度服务：

  getUsers(): Observable<User[]> 
    return this.http.get<User[]>(`<ip>' + '/users');
  

【问题讨论】：

你可以尝试将max-age从3600秒减少到一个合理的值

【参考方案1】：

我可以看到您正在服务器端进行缓存，您可以通过调用带有 @CacheEvict 注释的方法以及您要驱逐的密钥来驱逐缓存：

@CacheEvict(value = "users", allEntries = true)

或者您可以使用CacheManager 以编程方式执行此操作：

@Autowired
CacheManager cacheManager;

public void evictSingleCacheValue(String cacheName, String cacheKey) 
    cacheManager.getCache(cacheName).evict(cacheKey);

【讨论】：

谢谢，这对我帮助很大，但我仍然有一个问题：我还使用浏览器缓存在控制器内部的响应中添加了 Cache-Control，我怎样才能使它也无效？

@PatrickMazzucchetti 您是否尝试将密钥的值设置为null？

我应该在哪里设置空值？