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

Question

I have a vue-router that looks like this:

const router = new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      children: [
        {
        {
          path: 'main',
          name: 'main',
          component: () => import(/* webpackChunkName: "main" */ './views/main/Main.vue'),
          children: [
            {
              path: 'dashboard',
              name: 'main-dashboard',
              component: () => import(/* webpackChunkName: "main-dashboard" */ './views/main/Dashboard.vue'),
            },
...

There are route guards in place so that once a user is logged in they are directed to /BASE_URL/main/dashboard.

  public beforeRouteEnter(to, from, next) {
    routeGuardMain(to, from, next);
  }

  public beforeRouteUpdate(to, from, next) {
    routeGuardMain(to, from, next);
  }

const routeGuardMain = async (to, from, next) => {
  if (to.name === 'main') {
    next({ name: 'main-dashboard'});
  } else {
    next();
  }
};

I'm storing user_id and account_id in a Vuex state and I'd like to be able to create a url structure like:

BASE_URL/<account_id>/dashboard

But I'm having trouble accessing the account_id from the store (I have getters setup to get the relevant params) and passing it as a parameter during the redirect in the route guard (its null / undefined, so I think I need to await somewhere??).

I can set up dynamic urls for paths which don't have a route guard, but not sure how to do it with them in place.

I've read through the vue-router docs, but can't work it out.

Please can anyone suggest how I can achieve the target url structure? Apologies my frontend skills are lacking and I'm new to Vue.js

Thank you!

Ollie Graham Ollie Graham · Accepted Answer · 2020-05-28T14:23:04

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();
    }
  }
};

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

1 Answers