Vue-Router: Protecting private routes with authentication the right way

Question

I have a /profile route that should only be accessible by an authenticated user. From research, the recommended approach is to use vue-router's navigation guard:

Here is the route object:

  {
    path: '/profile',
    name: 'MyProfile',
    component: () => import('@/views/Profile.vue'),
    meta: { requiresAuth: true }
  },

And here is the router's navigation guard:

router.beforeEach((to, from, next) => {
  if (to.matched.some((record) => record.meta.requiresAuth)) {
    if (isAuthenticated()) {
      next()
    }
    else {
      alert('Auth required!')
      next('/login')
    }
  }
})

The isAuthenticated() function above sends a jwt token (stored in cookie) to the /jwt/validate endpoint which validates the token and returns a 200 OK response:

export function isAuthenticated() {
  axios.post(`${baseUrl}/token/validate`, {}, { withCredentials: true })
    .then(resp => resp.statusText == 'OK')
    .catch(err => false)
}

With this approach, every time we visit the /profile route, we are making a POST request to the /token/validate endpoint. And this works quite well. However, is it too excessive to make this request every time?

My Solutions

I wonder if there is some way to store the data locally in memory. I thought of two possible solutions:

1. Option 1: Storing the data on vuex store, however I have learned that the vuex store object is accessible via the browser's console. This means that anyone can modify the access logic to gain access to protected routes.
2. Option 2: Store it inside a custom Vue.prototype.$user object, however this is similarly accessible via console and therefore has the same security risk as option 1.

Essentially, my question is: is there an option to access a protected route without having to validate the jwt token on the server-side every time?