是否可以在Vue Router中使用beforeEnter导航保护来重定向用户

Question

我正在使用Vue2和Vue Router 3.5 构建一个SPA应用程序

该应用程序有两种身份验证途径，"管理"one_answers"组织">

我设置了路由器，这样每个身份验证保护在url 中都有自己的前缀

'/auth/：guard'

"/组织">

"/admin">

路由器文件如下所示：

const routes = [
organisations,
authRoutes,
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})

在组织文件内部，我返回一个对象：

export default {
path: '/organisations',
meta: { auth: true, guard: 'organisations' },
component: () => import('../views/Organisations/OrganisationContainer.vue'),
beforeEnter: (to, from, next) => {
return store.dispatch('authentication/check')
.then(response => {
if(response) {
if(response.guard == 'admin') {
return next('/admin')
}
if(response.guard != 'organisation') {
return false
}
}else{
return next('/auth/organisation/login')
}
})
},
children: [
{
path: '/',
name: 'organisation.dash',
meta: { auth: true, route_identifier: 'dashboard', title: 'Dashboard' },
component: () => import('../views/Organisations/Dashboard/Dashboard.vue')
},
}

在以前的项目中，我使用了router.beforeEach来处理系统中的导航。

router.beforeEach的问题是，我不想有一个大的方法来处理系统中每条路线的导航。如果我能有这样的东西，那就容易多了

"如果有人试图访问/organization路由，但他们没有登录，请将用户重定向到路由/auth/organization/login，如果他们已经登录，但他们是管理员，则将用户重定向至他们的仪表板">

我本来打算使用beforeEnter来实现这一点，但每当我尝试使用next((函数重定向时，都会返回一个空白的白色屏幕。如果我返回不带参数的next((函数，它不会重定向，但页面仍然加载。

我可能滥用了beforeEnter导航保护程序，但有人知道我如何使用beforeEnter引导保护程序重定向用户，或者在不使用beforeEach和有一个大方法的情况下实现类似的功能吗？

提前感谢

Answer 1

router.beforeEach的问题是我不想有一个大型方法来处理系统中每条路线的导航。

这种方法没有任何问题，只需确保beforeEach中的代码很快(不要在beforeEah中进行API调用(，如果你有很多代码，没有什么可以阻止你将代码拆分成多个函数，这样它更具可读性。

然而，如果你真的不需要使用beforeEach，并且你只有几个有特定要求的路线，你可以使用beforeEnter，但它与beforeEach.有点不同。首先，在您提供的代码片段中，您在路由上定义了一个beforeEach回调，但beforeEach是一个路由器级别的回调，如文档中所述。

您必须更改您的代码段，并将beforeEach替换为beforeEnter，如下所示：

export default {
path: '/organisations',
meta: { auth: true, guard: 'organisations' },
component: () => import('../views/Organisations/OrganisationContainer.vue'),
beforeEnter: (to, from, next) => {
return store.dispatch('authentication/check')
.then(response => {
if(response) {
if(response.guard == 'admin') {
return next('/admin')
}
if(response.guard != 'organisation') {
return false
}
}else{
return next('/auth/organisation/login')
}
})
},
children: [
{
path: '/',
name: 'organisation.dash',
meta: { auth: true, route_identifier: 'dashboard', title: 'Dashboard' },
component: () => import('../views/Organisations/Dashboard/Dashboard.vue')
},
}

---