Vue Router: Load routes based on user role

Question

I'd like to use the same route path /dashboard to load slightly different views for my users based on their user role.

Previously, I've loaded in different routes based on the current domain:

import MarketingSiteRoutes from './marketingSiteRoutes'
import DashboardRoutes from './dashboardRoutes'
import CampusRoutes from './campusRoutes'

Vue.use(VueRouter)

const host = window.location.host
const parts = host.split('.')

let routes

if (parts.length === 3) {
  const subdomain = parts[0]

  switch (subdomain) {
    case 'dashboard':
      routes = DashboardRoutes
      break
    case 'demo':
      routes = CampusRoutes
      break
    default:
  }
} else {
  routes = MarketingSiteRoutes
}

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

This approach only relies on subdomain, which is available on creation, so everything can be synchronous. I would have to authenticate the user, load in the correct routes based on their role, and then export the router to initialize the vue app.

Ideally, I could load in ...adminRoutes, ...parentRoutes, ...childRoutes based on the user's role, which could contain all the route definitions for the role.

I'm using Feathers-vuex, but I can't seem to await the user and then export the router. Any way to do this?

I think this has an answer: https://stackoverflow.com/questions/48832181/dynamically-add-child-routes-in-vuejs - Vue router documents the method here: https://router.vuejs.org/api/#router-addroutes — muka.gergely, May 01 '20 at 17:51

score 2 · Answer 1 · answered May 01 '20 at 20:16

I would use a main Dashboard component, that checks the user role, and then shows the correct child component.

<template>
  <div>
    <dashboard-admin v-if="isAdmin" />
    <dashboard-standard v-if="isStandard" />
  </div>
</template>

<script>
export default {
  data () {
    return {
      isAdmin: false,
      isStandard: false
    }
  },
  components: {
    DashboardAdmin: () => import('./DashboardAdmin.vue'),
    DashboardStandard: () => import('./DashboardStandard.vue')
  },
  created () {
    // Check user role and set one to true.
  }
}
</script>

Vue Router: Load routes based on user role

1 Answers1