0

I am testing my Angular application that uses ui.router and authentication token. There is a partial page that is available only to authorized users. Here is the steps to reproduce:

1) Login

2) Navigate to partial user profile page

3) Logout

  • it deletes authentication header like this:

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

  • then navigates to a different page

4) In the browser address bar manually navigate back to the profile page.

  • browser sends http request with the token I just removed! I can see it in Chrome Network view.

5) Subsequent requests to the profile page are issued without the token and gets rejected

This problem does not happen in Safari.

  • I am not sure but It is probably about Chrome's Cache , have a look at link http://stackoverflow.com/questions/1046966/whats-the-difference-between-cache-control-max-age-0-and-no-cache – katmanco Sep 16 '15 at 07:24
  • I can see what you mean. In my express server the header was set to maxage = 0, I changed it to cache-control: private, in which case Chrome should not cache this at all, but it did not help. –  Sep 16 '15 at 22:10

2 Answers2

1

This is actually a known problem with Angular JS caching templates. Sadly there seems to be no solution for it. '$templateCache.removeAll()' does not work for me. There are numerous posts about it:

AngularJS disable partial caching on dev machine

Remove Template cache on logout Angular.js

How to refresh / invalidate $resource cache in AngularJS

P.S. Actually, there is a solution that worked:

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

Slightly modified version looks like this:

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

After some more research I found even better solution. '$templateCache.removeAll()' actually does work, except that templates are still kept somewhere and to make sure they are updated I need to reload current state:

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

This way I do not need to turn off the cache completely, but can just wipe it out whenever a user is logged in or out.