Refresh after logout

Questions
1

Hi :slight_smile:

I’m writing a very small app with Framewor7, version 6. I have a login page, an home page and few other pages, with components and store. In home page I initialize store state (based on account). All works fine… BUT I have a problem: after logout, I clear store, navigate to login, login successful, but home page is cached! I can’t reload it. In my login page component I have:

$f7router.navigate({ name: 'home' }, { reloadCurrent: true, ignoreCache: true});

How can I force reload of home page? Why “ignoreCache” not fires? I’d rather avoid initializing the store state in login API…
Alternatively, is possible to trigger “unmount” of home page after logout? If yes, how?

Please help! Thanks in advance!

2

UPDATE: I’ve found a temporary solution for clear the cache:

 app.cache.components = []
3

I set “stackPages: true” in view’s creation, to keep in memory store’s updates between pages…
In logout route, I manually set:

app.cache.components = [];
app.cache.xhr = [];
4

Because stack pages is set to true, you can also use

$f7router.navigate('/login/', { clearPreviousHistory: true })

or

<a href="/login/" data-clear-previous-history="true">Logout</a>
5

If I set stackPages to false instead this will work?

$f7router.navigate({ name: 'home' }, { reloadCurrent: true, ignoreCache: true});
6

stackPages will always keep previous pages in the DOM, so if you try to ignoreCache it will just ignore URLs in the cache but not DOM pages.

Just clearPreviousHistory before going to the home page

1 Like
7

Not works… :frowning: My code:

router.navigate({ name: 'home' }, {clearPreviousHistory: true});

If I check app.cache.components in my console debug, nothing happened

8

Do it before going to the home page (in the login page).

9

Here my logout route:

	{
		path: '/logout/',       
//        async({ router, resolve, reject }) {
		beforeEnter: function ({ resolve, reject, router }) {
			reject();
			app.request.get('./desk/default/logout').then(function (res) {
				localStorage.clear();
				
				app.store.state =  {
					ticket: new Map(),
					messaggi: new Map(),
					files: new Map(),
					rapporti: new Map(),
				}
				
//                app.cache.components = [];
//                app.cache.xhr = [];
				
				router.navigate({ name: 'home' }, {reloadCurrent: true, reloadAll: true, clearPreviousHistory: true});//
//                resolve({componentUrl: './desk'}, {reloadCurrent: true, reloadAll: true});
//                
				$(".page-detail-placeholder").html("Effettua il login per accedere");
			})
		},
	},

PS: I have main app component layout

10

On this situation I think you are only required to resolve or reject, not router navigation.
What happens if you do

resolve({ componentUrl: './pages/desk.html', { reloadAll: true } })
11

It not works… Blank page after that! For the moment I call window.location.reload() after ajax response… Yeah, I know, it isn’t the best solution…! :sob:

PS: my app is a main app component with intro/login page, then master/detail pages

12

Are you loading the right page? If you resolve componentUrl like my above example make sure you have the desk.html file in the src/pages directory

Or you resolve like this for f7 components:

import DeskPage from '../pages/desk.f7.html';
// ...
resolve({ component: DeskPage, { reloadAll: true } })