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

Question

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

应用程序有两个身份验证路由，'admin' 和 'organisation'

我设置了路由器，因此每个身份验证守卫在 url

中都有自己的前缀

'/auth/:guard'

'/组织'

'/admin'

路由器文件如下所示：


const routes = [
    organisations,
    authRoutes,
]

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

在组织文件中，我return一个对象：

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 的问题是我不想用一个大型方法来处理系统中每条路线的导航。如果我能有像

这样的东西就容易多了

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

我原计划使用 beforeEnter 来实现这一点 - 但每当我尝试使用 next() 函数进行重定向时，return 会出现空白屏幕。如果我 return 没有参数的 next() 函数，它不会重定向，但页面仍然加载。

我可能滥用了 beforeEnter 导航守卫 - 但有谁知道我如何使用 beforeEnter 导航守卫重定向用户，或者在不使用 beforeEach 和有一个大的方法来应对的情况下实现类似的功能？

提前致谢

Answer 1

The problem with router.beforeEach is that I don't want to have one large method to handle the navigation for every route in the system.

这种方法完全没有问题，只要确保你在 beforeEach 中的代码是快速的（不要在 beforeEach 中调用 API），如果你有很多代码，没有什么能阻止你拆分代码有点变成了多个函数，因此更具可读性。

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

您必须更改代码段并将 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')
        },
}

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

Is it possible to use the beforeEnter navigation guard in Vue Router to redirect the user?

vue.js

vue-router