How to update the state of a component?

Question

Vue.js

On a project with a vue router, I use oauth authentication. The custom library sets the token in localStorage and has the isAuthenticated method. The sidebar component has a menu item that should only be displayed after authentication.
So here's the crux of the problem, after authentication, the menu item is displayed only after the page is refreshed, the sidebar component is outside the router-view. Is it possible to update the component's state without using store and wrapping sidebar in router-view?

Answer 1

In the place where you write the token in localStorage, we emit an event, for example $root.$emit('token:saved') .
And in the sidebar we subscribe to it in mounted: $root.$on('token:saved', this.showMenuIfTokenExists) .