是否可以使用Vue Router中的beforeEnter导航守卫来重定向用户？

Question

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

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

中都有自己的前缀

我有路由器设置，以便每个身份验证守卫在 url '/auth/:guard '

'/organization'

'/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 中的代码速度快（不要在 beforeEach 中进行 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')
        },
}

---