Handling User Roles and Permissions in Vue.js with Laravel

Level 29

Are you using Vue with Inertia and Laravel ? Or are you using Vue as separated SPA with Laravel as API ?

Level 6

@gych I'm using Vue as separated SPA with Laravel as API

Best Answer

Level 29

@ShadyarBzharOthman Check this page from Vue documentation for more info: https://router.vuejs.org/guide/advanced/meta.html

Level 6

@gych Thanks, by that I can protect the routes but what about an action on a page? for example Owner can delete a post but Admin can not?

Level 29

@ShadyarBzharOthman In your templates you can use a condition that checks if the user has the right role for the action.

1 like

Level 6

@gych Thanks!

1 like

Level 29

@ShadyarBzharOthman No problem! If your question has been answered, please don't forget to close your thread by selecting the best answer. If you have any more questions don't hesitate to reach out :)

1 like

Ben Taylor

Level 35

I personally see front end authorisation as nothing more than an aid for visual display. E.g. if a user doesn't have permission to delete something, I either hide the delete button or disable it. But I do not assume that it is sufficient for protecting against unauthorised actions. I always use server side authorisation for that.

In my projects a user has a role that has permissions associated with it. This is basically an object of key value pairs. The key is the type of thing requiring permission. The value is an integer showing level of permission. 0 for none, 1 for view all, 2 for edit etc. this information is passed to my Vue components to use for authenticating different things. I also use a little helper to make it look cleaner by hiding the logic.

For editing a product the logic would look something like


return user.role.permissions['product'] >= 2

1 like