Multi Auth Guard VueJS Vue-Route Vuex答案

【问题标题】：Multi Auth Guard VueJS Vue-Route VuexMulti Auth Guard VueJS Vue-Route Vuex
【发布时间】：2019-08-23 14:38:02
【问题描述】：

我有一个关于 VueJS 及其身份验证形式的问题，我正在尝试使用 beforeEnter 执行多重身份验证保护，但它不起作用，我留下了一份关于我想如何做的工作，看看他们是否可以帮帮我。

const isGlobal = (to, from, next) => {
    console.log('isGlobal called');
    if (store.getters.isAuthenticated && store.getters.getProfile.is_global) {
        next();
        return
    }

    next(false  )
}

const isAdmin = (to, from, next) => {
    console.log('isAdmin called');
    if (store.getters.isAuthenticated && store.getters.getProfile.is_admin) {
        next();
        return
    }

    next(false)
}
const isSupervisor = (to, from, next) => {
    console.log('isSupervisor called');
    if (store.getters.isAuthenticated && store.getters.getProfile.is_supervisor) {
        next();
        return
    }

    next(false)
}

const routes = [{
        path: '/',
        name: 'login',
        component: Login,
        beforeEnter: [isSupervisor || isGlobal || isAdmin],
    }
];

谢谢

【问题讨论】：

标签： vue.js vuex vue-router guard

【解决方案1】：

问题是[isSupervisor || isGlobal || isAdmin]是一个等于[false]或[true]的数组，它必须是一个函数。试试这样的：

const isGlobal = store.getters.isAuthenticated && store.getters.getProfile.is_global

const isAdmin = store.getters.isAuthenticated && store.getters.getProfile.is_admin

const isSupervisor = store.getters.isAuthenticated && store.getters.getProfile.is_supervisor

const conditionalNext = function(condition) { 
    return (to, from, next) => {
        if (condition) {
            next();
            return
        }
        next(false)
    }
}

    const routes = [{
            path: '/',
            name: 'login',
            component: Login,
            beforeEnter: conditionalNext(isSupervisor || isGlobal || isAdmin)
        }
    ];

【讨论】：