Dynami c root структура URL-адреса в Vue с vue -маршрутизатором, защитой маршрута и Vuex - PullRequest
Новая
       54

Dynami c root структура URL-адреса в Vue с vue -маршрутизатором, защитой маршрута и Vuex

0 голосов
/ 28 мая 2020

У меня есть vue -маршрутизатор, который выглядит следующим образом: 

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'),
            },
...

Имеются средства защиты маршрута, так что после входа пользователя в систему они направляются на /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();
  }
};

Я храню user_id и account_id в состоянии Vuex, и я хотел бы иметь возможность создать такую ​​структуру URL-адресов, как:

BASE_URL/<account_id>/dashboard

Но у меня проблемы с доступом к account_id из магазина (у меня есть настройки геттеров для получения соответствующих параметров) и передача его в качестве параметра во время перенаправления в охраннике маршрута (его значение null / undefined, поэтому я думаю, что мне нужно ждать где-нибудь ??).

Я могу настроить динамические c URL-адреса для путей, которые не имеют защиты маршрута, но не знаю, как это сделать с ними на месте.

Я прочитал документацию vue -router, но не могу с этим справиться.

Пожалуйста, кто-нибудь может подсказать, как я могу достичь структуры целевого URL? Приносим извинения, мне не хватает навыков работы с интерфейсом, и я новичок в Vue. js

Спасибо!

1 Ответ

0 голосов
/ 28 мая 2020

Нашел решение, подобное этой ссылке:

Доступ к состоянию Vuex при определении 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();
    }
  }
};
...