Как сделать фильтрацию маршрутов vue?

Question

[nvdfxx]

В проекте пункты меню выводятся с помощью v-for="route in this.$router.options.routes". В vuex хранится роль юзера из firebase (null, user, admin). Нужно фильтровать массив роутов для вывода нужных пунктов меню с учетом роли юзера. Как это лучше реализовать? Желательно без хардкода отдельных массивов роутов под каждую роль.

Answer 1

[Klein Maximus]

Ну, это чисто для примера. В meta роута указываете роль (или роли), которым маршрут доступен.

<ul>
    <li v-for="route in routes"> ... </li>
  </ul>

// ...
export default {
  computed: {
    // ...
    userRole() {
      return this.$store.state.user.role;
    },
    routes() {
      return this.$router.options.routes.filter(({ meta }) => meta && meta.role === this.userRole);
    },
    // ...
  },
}
// ...

Comments

[nvdfxx]

Спасибо, но могут быть роуты, которые должны быть доступны для нескольких ролей, например: для user и admin - "Мой профиль". Небольшое улучшение:

routes() {
    return this.$router.options.routes.filter( route => route.role.some(elem => elem === this.userRole));
}

[Klein Maximus]

nvdfxx, само собой. Я же просто привел пример работы именно с meta. Как Вы будете использовать эту информацию (улучшать, изменять) - полностью Ваше решение.

[Klein Maximus]

nvdfxx, вообще, user и admin - по сути это не роли, а уровни доступа.
Роли - это например, blogPostCreator, profileUpdater.
И эти роли могут принадлежать различным уровням доступа.