Javascript 是否有方法根据用户角色为一个路由加载不同的视图？

如果我想根据角色的不同使用主页路径“/”，是否有一些实现？就像如果您是授权用户，您将看到

MainAuth

，如果您是来宾，您将看到

MainGuest

？这里有一些代码可以帮助我解释

const routes = [
  {
    path: '/',
    name: 'main_auth',
    component: MainAuth,
    meta: {
      requiresAuth: true
    }
  },
  {
    path: '/',
    name: 'main_guest',
    component: MainGuest,
    meta: {
      requiresGuest: true
    }
  }
]

---

对于本例，它只加载我声明的第一条路径，无论我是来宾还是用户。更具体地说，我在主路径“/”上有一个登录/注册模块，我想在登录后在同一路径“/”上加载一个授权用户页面。

您可以使用beforeach方法将用户重定向到另一个路由

例如：

router.beforeach（（to，from，next）=>{
//确定路由是否需要身份验证
const requiresAuth=to.matched.some（x=>x.meta.requiresAuth）；
const user=auth.getUser（）；
//如果有，但他们没有登录，请将用户发送到“/登录”
if（requireauth&！user）{
下一步（“/login”）；
}否则{
//否则就让他们去下一个目的地
next（）；
}
});

因为您只想使用一条路径，所以可以使用基本路径，并在组件本身中完成工作。路线：

const路由=[
{
路径：“/”，
名称：'main'，
组成部分：主要，
}
]

Main

查看组件：

Auth

组件：

这样，您可以检查用户是否从

Main

view组件登录，并显示

Auth

组件或主要内容

然后，在

Auth

组件中，使用一个切换，允许用户在

Login

和

Register

组件之间切换。

以下是3个选项：

1。简单计算视图

要允许单个管线显示任意数量的条件视图，请使用计算构件

注册视图：

从“Vue”导入Vue
从“/views/Default.vue”导入ViewDefault
Vue.component（'view-default'，ViewDefault）
从“/views/Auth.vue”导入ViewAuth
Vue.component（'view-auth'，ViewAuth）
从“/views/Guest.vue”导入ViewGuest
Vue.component（'view-guest'，ViewGuest）

路线：

  {
    path: '/',
    name: 'index',
    component: ViewDefault
  },

查看

Default.vue

导出默认值{
名称：“查看默认值”，
计算：{
视图（）{
返回此。已验证的“查看验证”：“查看来宾”
}  
}
}

您可以在

view（）

中创建任意数量的条件检查

---

2。条件命名视图（未尝试概念）

<>我会考虑使用命名视图，我相信你可以用用户和访客版本来查看很多路径，而不是我尝试过的：

路由器

常量路由器=新的VueRouter({
路线：[
{
路径：“/”，
组成部分：{
默认值：MainGuest，
授权人：MainAuth，
}
}
]
})

---

3。计算布局

然而。。。我个人使用I/O阻塞布局，计算

布局

我检查各种应用程序状态，这些状态根据计算包含

的最终布局之前的条件控制显示哪些布局

我让路由器路径通过

meta

data指定自定义布局，设置备用布局，否则返回默认布局

路由器

{
名称：'索引'，
路径：“/”，
元：{
标题:"欢迎",，
卫兵：“auth”
},
组件：导入（“@/views/welcome”）
},
{
名称：'设置'，
路径：'/settings'，
元：{
标题：“帐户设置”，
布局：“设置”，
卫兵：“auth”
},
组件：导入（“@/views/account settings”）
}

App.vue

main.js

import Vue from 'vue'

import LayoutOffline from './layout-offline')
import LayoutAuthenticating from './layout-authenticating')
import LayoutLogin from './layout-login')

import LayoutDefault from './layout-default')
import LayoutSettings from './layout-settings')

Vue.component('layout-offline', LayoutOffline)
Vue.component('layout-authenticating', LayoutAuthenticating)
Vue.component('layout-login', LayoutLogin)

Vue.component('layout-default', LayoutDefault)
Vue.component('layout-settings', Layoutsettings)

从“Vue”导入Vue
从“./路由器”导入路由器
从“./store”导入存储
导入“@/视图/布局”
从“./App”导入应用程序
//使用Vuex存储状态，`axios`调用和响应`interceptors`用于全局`commit`计算出的映射状态条件。
从“vuex”导入{mapState，mapGetters}
米辛({
计算：{
…映射状态（['user'，'isAuthentication'，'Isofline']），
…映射获取程序（['isAuthenticated']），
}
})
新Vue({
el:“#应用程序”
渲染：h=>h（应用程序），
商店，
路由器，
计算：{
layout（）{//可以将其移动到vuex并通过MapGetter访问。。。
如果（这是异氟醚）{
返回“布局脱机”
}
如果（此.正在验证）{
返回“布局验证”
}
if（this.$route.meta.hasOwnProperty（'guard'））{
if（this.$route.meta.guard=='auth'&&！this.isAuthenticated）{
返回“布局登录”
}
}
//如果当前路由具有首选布局，请使用它，否则返回“布局默认值”`
设layout=this.$route.meta.layout | |'默认'
返回'layout-${layout}`
}
},
})

views/layouts/index.js

import Vue from 'vue'

import LayoutOffline from './layout-offline')
import LayoutAuthenticating from './layout-authenticating')
import LayoutLogin from './layout-login')

import LayoutDefault from './layout-default')
import LayoutSettings from './layout-settings')

Vue.component('layout-offline', LayoutOffline)
Vue.component('layout-authenticating', LayoutAuthenticating)
Vue.component('layout-login', LayoutLogin)

Vue.component('layout-default', LayoutDefault)
Vue.component('layout-settings', Layoutsettings)

只有

布局默认值

或任何指定自定义布局的路由器路径应包含

以及页眉、页脚、边栏等

---

你可以将其与名称视图混合，不同的计算布局可以为相同的路径显示不同的命名路由器视图

是的，它是有效的，但这不是我真正谈论的。我已在主页“/”上登录/注册，我想在同一路径“/”上加载授权用户页。因此，如果我是来宾，我需要跳过用户的路由，如果我是角色的加载视图，则需要跳过用户的路由，反之亦然。我不知道是否可以声明两个相同的路由，实现这一点的另一种方法是使用道具：在一条路由中获得授权，然后使用此道具值进行条件重新设置