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

Posted 2023-02-22

【中文标题】Vue Router：根据用户角色加载路由

【英文标题】：Vue Router: Load routes based on user role

【发布时间】：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，但我似乎无法等待用户然后导出路由器。有什么办法吗？

【问题讨论】：

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

【参考方案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>