用多个守卫保护一个vue路由

Question

我有一个这样的vue路由器:

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router)
function guard (to, from, next) {
if (localStorage.getItem('jwt')) {
next()
} else {
next('/login')
}
}
function admin (to, from, next) {
if (localStorage.getItem('admin') && localStorage.getItem('admin') !== 'false' && localStorage.getItem('jwt')) {
next()
} else {
next('/noadmin')
}
}
export default new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'home',
beforeEnter: guard,
meta: { layout: 'default' },
component: () => import('@/components/dashboard.vue')
},
{
path: '/datacollector',
name: 'datacollector',
beforeEnter: guard,
meta: { layout: 'default' },
component: () => import('@/components/datacollector.vue')
},
{
path: '/licensing',
beforeEnter: admin,
name: 'licensing',
component: () => import('@/components/licensing.vue')
},
{
path: '*',
name: '404',
component: require('@/pages/404.vue').default
}
]
})

我现在的问题如下，如果有一个条目localStorage.getItem('datacollector')，它应该只指向路径/datacollector和/logout。因此，当他登录时，登录页面将他抛到路径/datacollector。但他也应该能够呼叫logout。对于其他用户，应该允许他们调用所有内容。我如何调整功能guard，无论我尝试什么，我总是以循环结束。谢谢你。

Answer 1

假设你想从任何路由中抛出用户到/datacollector路由，如果有localStorage.getItem('datacollector')的条目，除了/logout路由

您可以简单地检查to.path并相应地重定向用户:

function guard (to, from, next) {
if (localStorage.getItem('jwt')) {
if (localStorage.getItem('datacollector')) {
if (to.path != '/datacollector' && to.path != '/logout'){
next('/datacollector');
} else {
next();
}
} else {
next();
}
} else {
next('/login')
}
}