How to handle permissions for route from database?

Question

In Vue, when I want to restrict some pages for some users, in router I define a permission in meta, like this:

routes: [
    {
        path: 'transport',
        name: 'transport',
        component: Transport,
        meta: { permission: "edit_transport" }
    },
]

When user logins I have its JWT where I can find what permission he/she has and in route.beforeEach, I check if user has this permission, he/she can visit a page.

router.beforeEach((to, from, next) => {
    let token = window.localStorage.getItem('user_token');

    if(to.meta.permission == 'edit_transport') {
       //if user's token has edit_tranport permission let him visit the page
    }
})

But, now I have this permissions In database, there is a table where admin defines permission for page:

id     permision         page
_____________________________________
1      edit_transport    transport
2      write_post        create_post   

This means, for example user needs edit_transport permission to visit transport page.

My solution is: first I have to take all this permissions from database and save them in vuex store, and then access this store data in route.beforeEach and check what permission page needs and then check if user has this permission

router.beforeEach((to, from, next) => {
    let token = window.localStorage.getItem('user_token');
    let pagepermission = store.permissions[to.name]
    if (token.has(pagepermission)) {
        // let user visit the page
    } else {
        // redirect
    }
})

So, is it a good way or is there any other way better then this?

Answer 1

This is a good check to do on the client side, if you are also protecting routes / endpoints on the back end I think that would be the most well rounded solution.

I'm not sure what you're using on the backend but if its Node, you could use something like Passport to manage roles - as a middleware to routes and endpoints.