Auth0 Home Blog Docs

Adding navigation guards to router in Vue2 Quickstart


I went through the Quickstart SPA for Vue, but there was nothing about how to configure the router to allow/disallow certain routes based on authentication. The topic is covered in an Auth0 blog post:

but the structure of this app is completely different from the Quickstart, and instead of an AuthService, a function is defined in the router code itself.

Does anyone have an opinion on which approach is better? Is there a way to keep the structure of the Quickstart app and easily add logic to allow/disallow routes?


Seems to have something to do with setting up “Navigation guards” in your VueRouter instance, but adding something like

beforeEnter: {authenticated: true}

to the router logic in the SPA example doesn’t seem to do anything. Seems really weird that this isn’t included in the Quickstart, since it’s such obvious functionality you’ll need with Auth0…


It seems Auth0 isn’t terribly serious about implementing with Vue2, and I notice they’ve discontinued their Slack, and there doesn’t seem to be active support here. Can anyone recommend an alternate way to implement JWT with Vue that’s more intuitive?


One last note: if anyone else is struggling with this, there is an “auth-flow” example given in the vue-router documentation that explains how to do this much more clearly:

It’s not specifically for Auth0, but at least gives the basic concept of how to allow/disallow routes