Как динамически установить мета-роутер на vue из api как ролевый массив - PullRequest
Новая
       21

Как динамически установить мета-роутер на vue из api как ролевый массив

0 голосов
/ 08 июля 2019

У меня есть динамическая система ролей, администратор может добавить или удалить роль.Я ищу, как добавить роль в Vue Router в мета в качестве массива базы на уровне доступа к этой роли, я пытаюсь добавить его через магазин, он не работает.Как можно получить роли из API и установить его в Vue Router?может быть, я делаю неправильный путь, потому что я новичок в vuejs, может помочь мне, спасибо.

Я пытался добавить хранилище vuex, чтобы добавить мета-роутер, но у меня есть роли в хранилище, не устанавливая его на мета-роутер 

      name: 'Home',
      component: Home,
      children: [
        {
          path: '/users',
          meta: { label: 'Users', role: store.getters.roles },
          component: Users
        }]```


``` path: '/',
      name: 'Home',
      component: Home,
      children: [
        {
          path: '/users',
          meta: { label: 'Users', role: ['admin','staf'] },
          component: Users
        }, ```

1 Ответ

0 голосов
/ 08 июля 2019

Поскольку (нереактивный) объект маршрутов создается до того, как появится соответствующая информация в хранилище vuex (поскольку, скорее всего, ваш запрос API еще не выполнен), store.getters.roles по-прежнему пуст или равен нулю.Решением было бы вместо этого поместить в метаобъект функцию, которая может вызываться всякий раз, когда система доступа выполняет свою проверку роли: meta: { roles: () => store.getters.roles }.Просто сверьтесь с route.meta.roles() при запросах навигации.

Старый ответ (неправильно истолкованный вопрос)

Я не совсем уверен, что вы пытаетесь сделать с магазином vuex, но ядумаю, вы пытаетесь сделать «Дом» доступным для всех ролей.Я бы предложил просто удалить поле role из этих маршрутов (я бы также переименовал его в roles, так как оно может быть кратным, но это зависит от вас).Затем для принудительного применения системы доступа используйте что-то вроде: 


router.beforeEach((to, from, next) => {
  const user = yourAuthentication.user
  const lacksRole = to.matched.some(route => {
    return route.meta.roles && !route.meta.roles.includes(user.role)
  })

  if (lacksRole) {
    return next(false)  // Aborts the navigation request
  }

  // Route either doesn't require any role or user has one of the 
  // roles specified in the route meta object, continue navigation
  next()
})
...