Best way to authenticate a route from a vue SPA...

What is the best practice for authenticating access to a route from a single page application (using vue + vue-router)?

For example, let's say users should be logged in in order to view the profile page. Would it be better to make a request to the back-end before navigating to the route, like so:

route: {
canActivate: function(transition) {
    var authenticated = //make request to back end that checks if the user is authenticated
    
    if(authenticated) {
        transition.next();
    } else {
        transition.abort();
    }
}

Or would it be better to authenticate the user when they first visit the app, and store their authentication status in the front-end?

//user first visits the app:
this.authenticated = //ajax request that determines if user is authenticated


//later on, e.g. when trying to navigate to the profile page
route: {
canActivate: function(transition) {
    if(this.$root.authenticated) {
        transition.next();
    } else {
        transition.abort();
    }
}