Vue.js & Symfony — roles authentication
Authenticating user roles and permissions with Vue.js & Symfony based project
Use case
All the Roles based checks (on front) are relying on the data in the JWT token. Once the JWT token is received it’s being stored in the Browser Storage.
Extracted payload of the JWT looks like this:
Setting roles requirements on Vue.js routes
Vue.js route object has special property called meta, which allows to set any kind of additional data that is required. Following that I’m just setting meta property requiredRole like this:
Setting Vue.js guards for roles checks
Now additionally this solution requires configuring router object (which is part of vue-router package) just like this:
Bonus — role based component
Following all the roles checks logic, I’ve also added small role based component to wrap sub-components into permission validations. With this I can control what user sees also based on the role he has (for example debug toolbox which works regardless of the environment).
