Laravel과 Inertia.js의 역할 및 권한

En cualquier proyecto es muy común la utilización de role y permisos. Laravel은 Livewire와 함께 블레이드 또는 Laravel과 함께 프로젝션할 수 있는 실제 기능을 제공합니다. InertiaJS와 함께 Laravel Jetstream에서 역할 및 권한을 통합할 수 있습니까? 🤔

En este tipo de proyectos en el cual se combina el backend con el frontend es necesario que la technología frontend conozca al usuario autoncluyendo que role y permisos tiene. Por lo tanto, InertiaJS nos facilita nativamente obtener los roles y permisos. 😀

En tu backend debes de construir la funcionalidad de role y permisos, puedes utilizar cualquier paquete; en lo 개인 활용 Laravel Permission , si deseas un artículo honoro a cómo realizar esta funcionalidad, solo dejen un comentario solicitándolo.

Continuemos, en un proyecto con InertiaJS debemos ubicar el siguiente 미들웨어: HandleInertiaRequests.php . Dentro del método share debemos de realizar algunas modificaciones.

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        'auth' => function() {
            $user = auth()->user();
                return $user ? [
                    'roles' => $user->getRoleNames(),
                    'permissions' => $user->getAllPermissions()->pluck('name')
            ] : null;
        }
    ]);
}

Explico el código, si el usuario esta autenticado entonces que retorne los roles y permisos que el usuario tiene asignado; si no está autenticado que retorne nulo.

Ahora en un componente vue, dentro del template escribimos lo siguiente

<template>
    <div>
        {{ $page.props.auth.roles[0] === 'admin' ? true : false }}
    </div>
</template>

Con este pequeño código lo que hacemos es verificar si el primer rol del usuario es admin, en este caso es verdadero, lo que se podría hacer entonces es:

<template>
    <div v-if="$page.props.auth.roles[0] === 'admin'">
        Solo el admin puede ver.
    </div>
</template>

Espero que sea util esta forma de poder utilizar los roles y permisos en su proyecto Laravel con Inertia.js 🤭

지느러미

Na... Sigamos codeando 💪, en el caso que un usuario tenga más de un rol y varios permisos sería muy difícil adivinar que rol tiene y por tanto establecer las limits que se desea.

Para resolver este problema, haremos uso de un paquete llamado Vue Gates , Primero lo instalaremos utilizando yarn o npm:yarn add vue-gates o npm i vue-gates --save . En su documentación en la sección Usage/Server Side Rendering/The asyncData Method tiene un ejemplo de cómo aplicarlo en nuestro proyecto:

export default {
  async asyncData ({ $axios, $gates }) {
    const [roles, permissions] = await Promise.all([
      $axios.$get('/api/roles'),
      $axios.$get('/api/permissions')
    ])

    $gates.setRoles(roles)
    $gates.setPermissions(permissions)
  }
}

Con este ejemplo de la documentación podemos adaptarlo en cada página de vue; lo único malo es que se tendrá que repetir el código en cada página y eso no es una buena práctica, lo ideal es reutilizar el código. Entonces, por sencille vamos a crear un plugin en vue.

Creamos el siguiente archivo en la ruta resource/js/Plugins/Permissions.js .

import { usePage } from '@inertiajs/inertia-vue3'
export default {
    install: (app) => {
        app.mixin({
            mounted(){
                let authRoles = usePage().props.value.auth;
                let authPermissions;
                if(authRoles !== null){
                    authRoles = usePage().props.value.auth.roles;
                    authPermissions = usePage().props.value.auth.permissions;
                    this.$gates.setRoles(authRoles);
                    this.$gates.setPermissions(authPermissions);
                }
            }
        })
    }
}

Lo primero que haremos es importar usePage Desde InertiaJS, lo cual nos permite uso de los props, ¿recuerdan que en el middleware HandleInertiaRequest.php agregamos 'auth' para verificar si el usuario autenticado tiene roles y permisos?, lo que realmente hicimos fue que el 'auth' se cargue Ni bien se inicia el aplicativo Laravel, y por lo tanto estará disponible en toda nuestra aplicación.

처음에는 변수를 사용하지 않고 역할을 허용하지 않고 권한을 허용하지 않도록 설정하고, 권한을 부여하려면 권한을 부여해야 합니다.Roles le asignamos la autenticación del usuario, solo queremos saber si esta autenticado o no, en el authPermissions solo lo declaramos.

Vamos a registrar el plugin que hemos creado para poder utilizarlo globalmente en el archivo app.js.

import { createApp, h } from 'vue';
import { createInertiaApp } from '@inertiajs/inertia-vue3';
import VueGates from 'vue-gates';
import Permissions from './Plugins/Permissions';
const appName = window.document.getElementsByTagName('title')[0]?.innerText || 'Laravel';
createInertiaApp({
    title: (title) => `${title} - ${appName}`,
    resolve: (name) => require(`./Pages/${name}.vue`),
    setup({ el, app, props, plugin }) {
        return createApp({ render: () => h(app, props) })
            .use(plugin)
            .use(VueGates)
            .use(Permissions)
            .mixin({ methods: { route } })
            .mount(el);
    },
});

Una vez que el usuario esta autenticado pasará la condicional. Y las dos 변수는 요청하는 경향이 있으며, 로컬 조작 'vue gates' para las 각각의 제한 사항입니다.

Ahora, en un componente vue utilizaremos las directivas que nos proofe el paquete Vue Gates y haremos lo siguiente:

<template>
    <div v-role="'admin'">
        Solo el admin puede ver.
    </div>
</template>

Aplicar roles y permisos en InertiaJS (que es el eje de comunicación de Laravel con VueJS) se volvió muy fácil. Si quieres conocer más directivas de este paquete solo ve a la documentación de Vue Gates . Espero que sea de mucha utilidad para los que quieren aplicar roles y permisos a sus proyectos.

추가의

En mi repositorio tengo un proyecto llamado LaraDash que tiene implementado lo que describo en este artículo.


Si este artículo te fue de mucha ayuda, no dudes en darle un ❤.