如何在使用 angular7 和 springboot 构建的 Web 应用程序中使浏览器缓存无效

Question

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

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

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

有没有办法在修改浏览器缓存中的某些数据时使其无效？

弹簧靴：

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

  @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');
  }

Answer 1

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

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

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

@Autowired
CacheManager cacheManager;

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

Answer 2

您可以通过轻量级请求检查服务器端基于时间或基于内容的控件是否有任何更改。

基于时间 => 您可以在标题中使用 Last=Modified

基于内容 => 你可以使用 Etag

请检查这两个链接； https://devcenter.heroku.com/articles/increasing-application-performance-with-http-cache-headers

https://www.logicbig.com/quick-info/web/last-modified-and-if-modified-since.html