Access menu by different roles in VueJs project?

Question

Vue.js

What is the best way to implement such functionality?
Now, when logging in, a back request is sent and the response contains the current user role and the role of his company.

Menu items look something like this

[
    {
        title: 'title',
        href: 'url',
        companyRoles: ['role1', 'role2'],
        userRoles: ['userRole1', 'userRole2'],
    }
]

Method for creating a menu

export default createMenu(menuItems, userProfile) {
    return userProfile ? menuItems.filter(match(userProfile)) : []
}
const match = (userProfile) => (item) => rules.every(f => f(userProfile, item))

const rules = [check1, check2, etc] // передаем проверки

Actually a question how it is possible to make it more flexible and laconic. Are there any examples?

Answer 1

There are ready-made solutions for such cases, such as this: https://github.com/stalniy/casl
But in general, your bike is sometimes not a bad idea - there is no extra dependency, flexibility is up to you.