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

我将使用一个主要的Dashboard组件，该组件检查用户角色，然后显示正确的子组件。

<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路由器：根据用户角色加载路由

1 个答案: