[Vuejs]-Dynamic root url structure in Vue with vue-router, route guard & Vuex

0👍

Found a solution similar to this link:

Accessing Vuex state when defining Vue-Router routes

const startRouteGuard = async (to, from, next) => {
  await dispatchCheckLoggedIn(store);
  if (readIsLoggedIn(store)) {
      if (to.path === '/login' || to.path === '/') {
        if (store.getters.userMembership.account_id === null) {
          const watcher = store.watch(store.getters.userMembership.account_id, account_id => {
            watcher(); // stop watching
            next({ name: 'main', params: { account_id: account_id}});
          });
        } else {
          const account_id = store.getters.userMembership.account_id;
          next({ name: 'main', params: { account_id: account_id}});
        }
      } else {
        next();
      }
  } else if (readIsLoggedIn(store) === false) {
    if (to.path === '/' || (to.name as string).startsWith('main')) {
      next({name: 'login'});
    } else {
      next();
    }
  }
};

Leave a comment