Vue Router：根据用户角色加载路由答案

【问题标题】：Vue Router: Load routes based on user roleVue Router：根据用户角色加载路由
【发布时间】：2020-08-16 05:21:36
【问题描述】：

我想使用相同的路由路径 /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，但我似乎无法等待用户然后导出路由器。有什么办法吗？

【问题讨论】：

我认为这有一个答案：stackoverflow.com/questions/48832181/… - Vue 路由器在这里记录了方法：router.vuejs.org/api/#router-addroutes

标签： vue.js vue-router vue-cli

【解决方案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>

【讨论】：