How to configure a global navigation guard?

[huyixi]

When a user navigates to a page, I need to check their permissions and render the page accordingly based on those permissions. How can I achieve this with a global router guard?

[PindaPixel]

There's a ton of ways to do this, and it doesn't necessarily have to be a global navigation guard. For example, you could keep track of the user and their permissions in a global store and render the page based on the state of that store.

From what I can tell, navigation guards are more meant to redirect a user to a different page. Alternatively, you alter store state from a navigation guard: https://router.vuejs.org/guide/advanced/navigation-guards.html#Global-injections-within-guards

[posva]

FYI In most scenarios, the guard will be the simplest solution to avoid ending up in a page the user hasn't access and where things just break (e.g. failing permissions)

[posva]

You can attach guards with router.beforeEach() and other guards like usual, after creating your router instance.