Checking if signed in beforeEnter in Vue-router

[tawjaw]

Hello,

In my Vue app I am using Vuex store to store isLoggedIn

in main.ts after creating the Vue app I am listening for a change in Auth state

supabase.auth.onAuthStateChange((event, session) => {
  console.log("user session is changing", event, session);
  if (event === "SIGNED_IN") {
   //setting the isLoggedIn state in store to true
 }
});

With Vue-Router I have a beforeEnter hook that checks the state in the store and redirect whether it's logged in or not.

the problem is that the router hook is running before the session change triggers.
So the router hook sees it as not logged in, and then the auth state change. How can I ensure that the status of auth Is checked before triggering the router?

Thanks

[tawjaw]

I couldn't check beforeEnter the status of the user so now I have the following Mixin

export const loggedInMixin = Vue.extend({
  beforeMount() {
    if (this.isLoggedIn) this.$router.push("/");
  },

  computed: {
    isLoggedIn: function() {
      return store.state.isLoggedIn;
    },
    userInfo: function() {
      return store.state.user;
    }
  },
  watch: {
    isLoggedIn: {
      handler: function(value) {
        if (value) router.push({ path: "/" });
      }
    }
  }
});

and in every view I add this Mixin

export default Vue.extend({
  mixins: [loggedInMixin]
});

I don't know if there is a better way for this.

One advantage of this is that it works also with multiple tabs if you have something like vuex-multi-tab-state used with vuex store.