Vue Tip: Use Vuex in Vue Router Navigation Guards

const router = createRouter({ ... })

/**
* to: the target route location in a normalized format being navigated to.
* from: the current route location in a normalized format being navigated away from.
*/
router.beforeEach((to, from) => {
  // ...
  // explicitly return false to cancel the navigation
  return false
})

router.beforeEach(async (to, from) => {
  if (
    // make sure the user is authenticated
    !isAuthenticated &&
    // ❗️ Avoid an infinite redirect
    to.name !== 'Login'
  ) {
    // redirect the user to the login page
    return { name: 'Login' };
  }
});

import store from '@/store';

router.beforeEach(async (to, from) => {
  const authenticated = store.getters['auth/authenticated'];

  // redirect the user to login page if he is not authenticated
  if (!authenticated && to.name !== 'Login') {
    return { name: 'Login' };
  }
});