Remove Template cache on logout Angular.js

Question

How to remove Angular template cache once user clicks on logout? We did thorough research and tried to implement most of the solutions available out there. we tried following

HTML Meta Tags

<meta http-equiv="Cache-Control" content="no-cache" />
<meta http-equiv="Pragma" content="no-cache" />
<meta http-equiv="Expires" content="0" />

Server side

res.setHeader('cache-control', 'no-cache', 'no-store', 'must-revalidate');

Javascript

We tried to delete browser history as specified on this blog

Problem we are facing right now is when a user logs out from our app and press back button he is shown empty html templates as services are not cached how shall we make sure templates are not cached either?

just a suggesstion: manage back button to redirect user to login, rather than removing the template cache — harishr, Aug 12 '14 at 15:41
Hi @HarishR How can we do that? Any link would be really helpful .. — Kuldeep Daftary, Aug 12 '14 at 16:08
you must be using some routing mechanism in your application either ui-router or ng-route, using that you can change the route on $routeChangeStart or $stateChangeStart — harishr, Aug 12 '14 at 16:13
Thing is our login page is not made using angularJS. We have 1 common login page for multiple apps. — Kuldeep Daftary, Aug 21 '14 at 15:13
if that is managed at server side it would be much easier to do. — harishr, Aug 22 '14 at 18:20
@entre We solved that issue by redirecting user to login page as you suggested. Thanks. — Kuldeep Daftary, Oct 12 '15 at 12:21

score 14 · Answer 1 · answered Aug 12 '14 at 15:46

14

$templateCache is just a wrapper around $cacheFactory with a specific name. This is literally all of its code:

function $TemplateCacheProvider() {
  this.$get = ['$cacheFactory', function($cacheFactory) {
    return $cacheFactory('templates');
  }];
}

$cacheFactory has a removeAll() method. Try this, if you want to wire it up yourself (e.g. in a service into which you've injected $cacheFactory):

$cacheFactory('templates').removeAll();

But separately, maybe you want to disable caching entirely if your application is security-sensitive. You can do a reload() call on the entire browser to dump all local JS variables, and then your no-cache pragmas above on the actual HTTP-driven assets will do what you want.

answered Aug 12 '14 at 15:46

Chad Robinson

4,346
19
26

7

IMO `$templateCache.removeAll()` looks better – Yuriy Rozhovetskiy Aug 12 '14 at 15:51
4

Careful when using `$templateCache.removeAll()`. This actually removes everything, including templates used by third party libraries (like bootstrap-ui). Instead I suggest you remove templates individually using `$templateCache.remove('template.html')` – Marius Bughiu Mar 02 '16 at 08:18
$templateCache.removeAll() will break angularjs-toaster – Soichi Hayashi Dec 16 '16 at 22:23

score 0 · Answer 2 · edited May 23 '17 at 12:33

0

I found a solution that resolve my problem, usign php, here How to clear browser cache with php?

I think you can set a http request to a file php using this headers: header("Cache-Control: no-cache, must-revalidate"); header("Expires: Mon, 26 Jul 1997 05:00:00 GMT");

In my case, all my app is on Angularjs but I connect to an api with php, so in that php I put the headers and it worked!

Hope you help!

Edit: My problem was on movile browser(IE edge of WindowsPhone10), and no more problems with this solution.

edited May 23 '17 at 12:33

Community

1
1

answered Jul 19 '16 at 19:32

I.R. Vancleef

1
1

Answers should always be in the same language used in the question. – ArthurG Oct 11 '17 at 18:44

Remove Template cache on logout Angular.js

2 Answers2

Linked