Vue Router。根据用户角色加载路由

Question

我想使用相同的路径。/dashboard 来根据用户的角色为我的用户加载稍微不同的视图。

之前，我已经根据当前域加载了不同的路由。

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

这种方法只依赖于子域，而子域在创建时是可用的，所以一切都可以同步。我必须对用户进行认证，根据他们的角色加载正确的路由，然后导出路由器来初始化vue应用。

理想情况下，我可以加载 ...adminRoutes, ...parentRoutes, ...childRoutes 基于用户的角色，其中可能包含该角色的所有路由定义。

我用的是Feathers-vuex，但是我好像不能等待用户，然后导出路由器。有什么方法可以做到这一点？

Answer 1

我想使用一个主仪表板组件，检查用户角色，然后显示正确的子组件。

<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>