Auth Status and Page Refresh with Vuex

Hi! I’m trying to get familiar with Vue 3’s Composition API and Vuex 4 (my first approach to Vue), so I’m developing an app with a JWT token auth method. My question is theorical but I will share part of my code to explain.

My auth and user states and getters are like this in each corresponding store module:

auth.js
state: {
    token: localStorage.getItem("token") || "",
    stauts: ""
  },
getters: {
  isAuthenticated: state => !!state.token,
  authStatus: state => state.status
}
user.js
state: {
    status: "",
    profile: {}
  },
  getters: {
    getProfile: state => {
      return state.profile;
    },
    isProfileLoaded: state => {
      return !!state.profile.username;
    }
  }

My problem was that after a page refresh (F5) the user profile (state.profile) goes empty again, and this was crashing some components that used that information. The solution I came across was to set a validation to check in my main layout component if the profile is loaded with store.getters.isProfileLoaded, and if it wasn’t, it would dispatch the AUTH_LOGOUT actions and return to /login.

Main.vue
onBeforeMount(() => {
      if (!store.getters.isProfileLoaded || store == undefined) {
        store.dispatch(AUTH_LOGOUT);
        router.push("/login");
      }
    });

This solution doesn’t feels right to me, it’s not an odd case that the user reloads the page on porpouse, and after reading about this subject I’ve found that there are vuex plugins to persist state on page reloads, but I don’t want to use plugins “because so”, so my question is:

Is there an standard architectural solution to this problem/case?

I know there is no correct answers, but in my newbieness I might not know how to solve this common problem.

Thanks in advance for your help!