Vue路由器：基于用户角色加载路由

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，...父母路线，...儿童路线，其中可以包含角色的所有路由定义。

我正在使用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>