How to do vue route filtering?

Question

Vue.js

In the project, menu items are rendered with v-for="route in this.$router.options.routes". Vuex stores the user role from firebase (null, user, admin). It is necessary to filter the array of routes to display the necessary menu items, taking into account the role of the user. How it is better to implement it? Preferably without hardcode of separate arrays of routes for each role.

Answer 1

Well, this is just for example. In the meta of the route, specify the role (or roles) to which the route is available.

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