This is more of general frontend question, but for context, I'm using Vue 3 and vue-router.

I'm constructing functionality for authentication with Vue 3. Because I'm not using Vuex, I couldn't find a way to access state from the file where the router is instantiated. So I thought maybe I'd stick a flag called isAuthenticated into LocalStorage.

When the user logs in, isAuthenticated gets set to true, and then the router reads from this to validate subsequent redirects. This is very different from storing a token in LocalStorage – I store my tokens in httpOnly cookies.

For those that know Vue3/Vue-router, it looks like this:

  Router.beforeEach(async (to, from) => {

    // localStorage.isAuthenticated = false

    const isAuthenticated = localStorage.isAuthenticated;

    if (
      // make sure the user is authenticated
      isAuthenticated !== 'true' &&
      to.meta.requiresAuth &&
      // Avoid an infinite redirect
      to.path !== '/login'
    ) {
      // redirect the user to the login page
      return '/login'
    }
  })

It would be no big deal if someone hacked this and changed the flag to true; my backend will reject any API call that doesn't have the right JWT token.

But is this bad practice? It feels a little flimsy, and I'm looking to write a robust and secure app.