I've been intrigued by the idea of SPAs lately, so I decided to delve into it by working on a project with Laravel and Vue.
Initially, setting up CRUD operations using axios and vue-router was smooth sailing. However, things took a turn when user authorization and role-based decisions came into play. Without server-side rendering, managing roles and permissions solely on the Vue side seemed daunting. I found myself wondering about best practices and potential pitfalls.
My research led me to various resources like this, that, and the other. The consensus seemed to be storing data in a JS object or localStorage for conditional checks, like:
<p v-if="Laravel.user.role == 'admin'"> Confidential Data </p>
<p v-else> Unimportant Information </p>
However, I couldn't shake off concerns about security. What if a non-admin user manipulated their role using the console? Wouldn't that expose sensitive information?
Moreover, accessing role data from localStorage raised red flags:
localStorage.getItem('user.role')So, what are the most secure, standard, or widely used approaches to address these challenges?