I have a Polymer app. When a user logs out, I want to reset the entire app to its original state. (Right now, when the user logs back in after logging out, the app returns the user to the app state and page they were on when they logged out.)
Is there any convenient (i.e., global) app design or code pattern for accomplishing this? If there is nothing convenient/global, please show how to accomplish this locally (i.e., on an element-by-element basis).
After some research (and conversations in the Polymer slack group), it looks like there are two main suggestions so far. Others are welcome.
One can imperatively refresh the browser page using the JS statement:
location = location;
This solution is unsatisfying to me. It is essentially a hack and creates performance issues and other undesirable side effects such as waiting for the screen refresh and repaint.
Someone has suggested using a stateless app architecture. But I'm not sure how to implement it in the coding context of a Polymer app. Again, suggestions and ideas are welcome.
The best solution I have come up with is to refresh the browser upon user logout using the location.reload() method.
The trick is you've got to add some logic unique to your app that prevents an endless loop condition.
Reload upon logout:user: {
...
observer: '_userChanged',
},
...
_userChanged: function() {
var bool = this.foo(); // Add logic here to prevent endless loop condition
if( !this.user && bool ) {
location.reload();
}
},