Angular 模板的缓存问题答案

【问题标题】：Caching issue with Angular templatesAngular 模板的缓存问题
【发布时间】：2015-10-09 01:24:32
【问题描述】：

我正在测试使用 ui.router 和身份验证令牌的 Angular 应用程序。有一个部分页面仅供授权用户使用。以下是重现的步骤：

1) 登录

2) 导航到部分用户个人资料页面

3) 退出

它像这样删除身份验证标头：

删除$http.defaults.headers.common['x-access-token'];

然后导航到另一个页面

4) 在浏览器地址栏中手动导航回个人资料页面。

浏览器使用我刚刚删除的令牌发送 http 请求！我可以在 Chrome 网络视图中看到它。

5) 对个人资料页面的后续请求在没有令牌的情况下发出并被拒绝

Safari 不会出现此问题。

【问题讨论】：

我不确定，但可能与 Chrome 的缓存有关，请查看链接 stackoverflow.com/questions/1046966/…
我明白你的意思。在我的 express 服务器中，标头设置为 maxage = 0，我将其更改为 cache-control: private，在这种情况下 Chrome 根本不应该缓存它，但它没有帮助。

标签： angularjs google-chrome jwt

【解决方案1】：

这实际上是 Angular JS 缓存模板的一个已知问题。可悲的是，似乎没有解决方案。 '$templateCache.removeAll()' 对我不起作用。有很多关于它的帖子：

AngularJS disable partial caching on dev machine

Remove Template cache on logout Angular.js

How to refresh / invalidate $resource cache in AngularJS

P.S.实际上，有一个有效的解决方案：

http://opensourcesoftwareandme.blogspot.com/2014/02/safely-prevent-template-caching-in-angularjs.html

稍作修改的版本如下：

$rootScope.$on('$stateChangeStart',
  function(event, toState, toParams, fromState, fromParams) {
    if (typeof(fromState.templateUrl) !== 'undefined'){
      $templateCache.remove(fromState.templateUrl);
    }
  });

【讨论】：

【解决方案2】：

经过更多研究，我找到了更好的解决方案。 '$templateCache.removeAll()' 实际上确实有效，除了模板仍然保存在某个地方并确保它们被更新我需要重新加载当前状态：

  $templateCache.removeAll();
  $state.transitionTo($state.current, $stateParams, {
    reload: true,
    inherit: false,
    notify: true
  });

这样我不需要完全关闭缓存，只要用户登录或退出就可以清除它。

【讨论】：