是否可以使用Vue路由器中的beforeEnter导航保护来重定向用户？

Question

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

应用程序有两个身份验证路径，“admin”和“organization”

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

'/auth/：防护'

'/组织'

/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来处理系统中的导航。

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

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

我计划在 beforeEnter 之前使用它来实现这一点 - 但是每当我尝试使用 next（） 函数重定向时，都会返回一个空白的白屏。如果我返回不带参数的 next（） 函数，它不会重定向，但页面仍然加载。

我可能滥用了beforeEnter导航保护——但是有谁知道我如何使用beforeEnter导航保护重定向用户，或者在不使用beforeEach并有一个大方法要处理的情况下实现类似的功能吗？

提前致谢

Answer 1

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

这种方法没有任何问题，只要确保你的代码是快速的（不要使API调用在beford的每个），如果你有很多代码，没有什么可以阻止你把代码分成多个函数，所以它更具可读性。

但是，如果您确实不需要使用< code>beforeEach,并且您只有几条具有特定要求的路线，您可以使用< code>beforeEnter,但它与< code>beforeEach略有不同。。首先，在您提供的代码片段中，您在路由上定义了一个< code>beforeEach回调，但是beforeEach是一个路由器级回调，如docs中所述。

您必须更改代码段，将< code>beforeEach替换为< code>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')
        },
}