Restart client-side view of application

Dash Python
1

Hey all-

In our app a user can login and their preferences are stored in a dcc.Store.

I’m implementing a logout and would like for an html.Button to trigger an application restart that (1) resets the dcc.Store data elements to their default startup values and (2) brings the user back to the home page of the application.

Any thoughts on how to do this? An opinionated interpretation of this question is “how to trigger application to purge cache and restart.”

Appreciate your thoughts as always.

2

Hi,

In principle you can do it by having a callback triggered by the logout button that has as outputs the data prop from dcc.Store and the pathname of dcc.Location (returning something like None and "/", depending on your app structure and logic.

It might be a bit more challenging to combine with login and navigation due to repeated outputs in the callbacks, but then you could use MultiplexerTransform from dash-extensions. :smiley:

3

Hello @jkunstle,

Check out here:

I clear the persisted values, so upon a certain trigger, you can trigger the persistence to be cleared. You can also use this same function to destroy all the dcc.Stores as well. This should in theory cause the app to send them anew.

I actually do this in my own applications.

1 Like
4

@jlfsjunior @jinnyzor

Thanks so much for your replies, these are both excellent solutions.

I’m going to try both and report back on their success, and then document what could be a future design pattern for other users to follow with the same problem.

Cheers and thanks as always!

5

Okay, here’s what I did:

I wrote a client-side callback that targets specific localStorage and sessionStorage values by deleting only those values whose keys are suffixed with “_dash_persistence.” It is called when a ‘logout-button’ is pressed and updates the dcc.Location pathname (the page location part of the href) to index, i.e. “/”

The callback then uses ‘window.location.reload()’ to trigger a page reload- I verified that this was available in all browsers:
Location reload() Method.

The following is an example of this, being influenced both by @jlfsjunior and @jinnyzor 's suggestions:

app.clientside_callback(
    """
    function(clicks) {

        // clear user's localStorage,
        // pattern-match key's suffix.
        const keys = Object.keys(localStorage)
        for (let key of keys) {
            if (String(key).includes('_dash_persistence')) {
                localStorage.removeItem(key)
            }
        }

        // clear user's sessionStorage,
        // pattern-match key's suffix.
        const sesh = Object.keys(sessionStorage)
        for (let key of sesh) {
            if (String(key).includes('_dash_persistence')) {
                sessionStorage.removeItem(key)
            }
        }

        // reload the page,
        // redirect to index.
        window.location.reload()
        return "/"
    }
    """,
    Output("url", "pathname"),
    Input("reset_button", "n_clicks"),
    prevent_initial_call=True
)

I hope this is helpful to people! To me it seems like a relatively robust logout design pattern.

1 Like