Polymer 1.x: How to reset entire app after logout

问题:

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).

Edit

After some research (and conversations in the Polymer slack group), it looks like there are two main suggestions so far. Others are welcome.

Reload Browser

One can imperatively refresh the browser page using the JS statement:

location = location;

and 534 other ways.

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.

Stateless Architecture

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.

回答1:

Several possible solutions include:

1. Clear the session in local storage and whereever you have it stored
2. Maintain a path to all user defined information and set those objects to {} on logout.
3. Login as anonymous guest user in such a way the new user overwrites the previous users info.
4. Keep a deep copy clone of the original main wrapper element state, then replace the current element with the old one
5. Merge the changes if your users data was saved in attributes or annotations they will be reset.
6. Replace the one element that maintains the users information.

回答2:

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();
  }
},