代码之家 › 专栏 › 技术社区 › mafortis

Vue路由器无法验证用户

vue-router vuejs2 vue.js javascript

mafortis · 技术社区 · 4 年前

我的一些应用程序路由仅限于我添加的管理员 requiresAdmin: true, 这些路由元,但不知何故,我并没有阻止其他用户访问这些路由。

代码

PS:为了更好地理解,我对部分内容进行了评论。

const router = new VueRouter({
    mode: "history",
    routes: [
        // ADMIN ROUTES
        {
            path: '/export',
            name: 'ExportXML',
            component: ExportXML,
            meta: {
                requiresAuth: true,
                requiresAdmin: true,  // only admins can see this page
                layout: 'admin',
                name: 'Export XML',
            }
        },
    ]
});

router.beforeEach((to, from, next) => {
    if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!store.getters.isLoggedIn) {
            next({
                name: 'login'
            })
        } else {
            next()
        }
    }
    if (to.matched.some(record => record.meta.requiresAdmin)) {
        // first make sure getter can get logged user data
        if (store.getters.loggedUser && !store.getters.loggedUser === undefined) {
            // then check if loged user "type" is admin (any other possebilities are denied)
            if (!store.getters.loggedUser.type === 'admin' || store.getters.loggedUser.type === '' || store.getters.loggedUser.type === null || store.getters.loggedUser.type === undefined || store.getters.loggedUser.type === 'worker') {
                next({
                    name: 'dashboard'
                })
            } else {
                next()
            }
        }
    }
    else {
        next()
    }
});


router.afterEach((to, from) => {
    Vue.nextTick(() => {
        document.title = to.pageTitle || 'Testing Site';
    });
});

export default router;

知道为什么吗,例如我的用户 worker 仍然可以看到 exports 页面是否仅限于管理员使用?

2 回复 | 直到 4 年前

Phil Moon 4 年前

问题就在这里

if (to.matched.some(record => record.meta.requiresAuth)) {
  if (!store.getters.isLoggedIn) {
    next({
      name: 'login'
    })
  } else {
    next() // ð specifically here
  }
}

一旦您验证了用户已登录,这将跳过任何其他检查。

你需要移动下一个 if 阻止管理员对此进行检查 else 上面的块,替换 next() 。事实上,你可以用 return 在需要时退出处理

if (to.matched.some(({ meta }) => meta.requiresAuth) && !store.getters.isLoggedIn) {
  return next({ name: 'login' }) // not logged in, redirect to login
}
if (to.matched.some(({ meta }) => meta.requiresAdmin)
    && store.getters.loggedUser.type !== 'admin') {
  return next({ name: 'dashboard' }) // not admin, redirect to dashboard
}
next() // otherwise, everything is fine

sazzad 4 年前

检查代码中的注释

if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) { // <== problem in condition
        next({
            name: 'login'
        })
    } else {
        next().  //  this line is always executed if a user is logged in. so any any logged in user can visit url in your application
    }
}

一种可能的解决方案是

if (to.matched.some(record => record.meta.requiresAuth)) {
    if (!store.getters.isLoggedIn) { 
        next({
            name: 'login'
        })
    } else {
        
        // then check if loged user "type" is admin (any other possebilities are denied)
        if (!store.getters.loggedUser.type === 'admin' || store.getters.loggedUser.type === '' || store.getters.loggedUser.type === null || store.getters.loggedUser.type === undefined || store.getters.loggedUser.type === 'worker') {
            next({
                name: 'dashboard'
            })
        } else {
            next()
        }
    }
    
}
else {
  next()
}