Estoy creando una aplicación usando Laravel Inertia.
Estoy usando el paquete de permisos de Laravel de Spatie para manejar la autorización y estoy tratando de encontrar una manera de tener un método o directive de can global para poder mostrar u ocultar elementos en la interfaz de usuario según los permisos de un usuario.
Sé que puedo enviar permisos desde mi controlador o mediante el middleware HandleInertiaRequest y luego verificarlos en un componente vue como este.
<button v-if="$page.props.auth.user.can['view users']">View Users</button>Y esto funciona bastante bien. Pero sería bueno si pudiera hacer algo que esté disponible globalmente y que sea un poco más fácil de recordar. Por ejemplo.
<button v-if="can('view users')">View Users</button>o
<button v-can="'view users'">View Users</button>Sin embargo, estoy luchando por descubrir cuál sería la mejor práctica para lograr esto.
Intenté agregar un método a la propiedad globalProperties en setup() así...
myApp.config.globalProperties.can = (permission) => { return props.initialPage.props.admin.data.can[permission]; };Esta mitad funciona, pero el problema con esto es que tengo que actualizar la página cada vez que se actualizan los permisos, a pesar de que paso los permisos permitidos a través del middleware Inertia.
También consideré crear un Mixin, pero creo que este no es el enfoque recomendado para Vue 3. Esto me llevó a ver las características de provide() e inject() de vue 3, pero no estoy seguro de si estoy ladrando al árbol equivocado con esos.
Entonces, supongo que mi pregunta es ¿cómo puedo tener un método global o una directiva vue que lea datos compartidos en una aplicación Laravel Inertia?
Creo que puede hacer esto implementando un módulo e importándolo globalmente. Algo como esto, por ejemplo, debería funcionar para lo que está tratando de lograr.
export default class Auth { constructor (params) { this.user = params.user this.role = params.role } /** * Determines what a user has permission to see. * * @param {String} ability * @returns Boolean */ can (ability) { if (this.store[ability]) { return this.store[ability] } const parts = ability.split(':') if (parts.length !== 3) { return false } const [ prefix, level, resource ] = parts if (['create', 'read', 'update', 'delete'].indexOf(level) === -1) { console.warn(`Incorrect permission method "${level}".`) return false } } hasRole (roles) { if (Array.isArray(roles)) { for(let i=0;i<roles.length;i++) { if (this.hasRole(roles[i])) { return true } } } return this.role === roles }Luego puede importar el módulo en su app.js así;
import Auth from '@/Modules/Auth' Usa el método como quieras, aunque en este caso estoy usando v-if
<button v-if="auth.can('view users)">View Users</button>