Laravel + Inertia Permission

MMehmetCanYUMUTUTAN · 4 Ağu 2021

Merhabalar.

laravel ve inertia ile çalışıyorum. Laravel'de spatie permission paketini kullanıyorum. Controller içinde role ve permission kontrolleri yapıyorum. Inertia tarafında ise ilgili role ve permission bilgisine göre .vue uzantılı view'larda bazı butonları veya componentleri göstermek ya da gizlemek istiyorum. Bunun için inertia içinde yada vue içinde nasıl bir yol izleyebilirm, bir paket ya da yöntem öneriniz var mıdır?

İyi günler dilerim.

sineld · 4 Ağu 2021

Inertia Share kısmına bakar mısın?

MMehmetCanYUMUTUTAN · 4 Ağu 2021

sineld Share kısmında User'ın permissonlarını vue tarafına gönderebilirim. Vue componentlerinde, blade templatelerde olan '@Can' gibi temiz bir kullanım için paket veya yöntem var mı diye de merak etmiştim v-show ile mesela kontrol ederken sürekli if gibi kontrol yazmak gelmişti aklıma. Cevabınız için teşekkür ederim.

BoraN7 · 4 Ağu 2021

class UsersController extends Controller
{
    public function index()
    {
        return Inertia::render('Users/Index', [
            'can' => [
                'create_user' => Auth::user()->can('users.create'),
            ],
            'users' => User::all()->map(function ($user) {
                return [
                    'first_name' => $user->first_name,
                    'last_name' => $user->last_name,
                    'email' => $user->email,
                    'can' => [
                        'edit_user' => Auth::user()->can('users.edit', $user),
                    ]
                ];
            }),
        ]);
    }
}

Doğrudan gönderebilirsiniz Controller safhasında...

https://inertiajs.com/authorization

mgsmus · 5 Ağu 2021

MehmetCanYUMUTUTAN Şöyle bir şey yapılabilir belki (yol göstermesi açısından temel düzeyde bir örnek):

resources/js/modules/auth.js

import {usePage} from "@inertiajs/inertia-vue3"

export default {
    install: (app, options) => {
        function can(permission) {
            return usePage().props.value.auth.user_permissions.includes(permission)
        }
        
        app.provide('can', can)

        app.mixin({
            methods: {
                can
            }
        })
    }
}

Bu üstteki için HandleInertiaRequests::share() içinde auth.user_permissions şeklinde kullanıcının sahip olduğu izinleri dizi olarak tanımlarsınız:

'auth.user_permissions' => Auth::user()->permissions->pluck('name')->toArray(),

gibi.

import Auth from '@/modules/auth'

app.use(Auth)

template içinde

<button :disabled="!can('edit')">
    Düzenle
</button>

ya da script içinde

setup() {
    const can = inject('can')

    function doSomething() {
        if(can('edit')) {
            //...
        }
    }
}

MMehmetCanYUMUTUTAN · 5 Ağu 2021

BoraN7 `

Cevabın için teşekkür ederim. Bu şekilde istediğim şekilde kullanabildim.

UserController.php

public function index()
    {
        return Inertia::render('Users/Index', [
            'users' => User::with('roles')->get(),
            'can' => [
                'create_user' => Auth::user()->can('users.create')
            ]
        ]);
    }

Users/Index.vue

v-if="this.can.create_user"

MMehmetCanYUMUTUTAN · 5 Ağu 2021

mgsmus Bu örneğiniz de güzel mantık. Vue tarafında başlangıç seviyesinde olduğum için laravel tarafından düşünmüştüm. Daha temiz bir yapı için bunu da deneyeceğim.

MMehmetCanYUMUTUTAN · 5 Ağu 2021

mgsmus import Auth from '@/modules/auth'

app.use(Auth)

Bendeki resources/js/app.js dosyası şu şekilde.


require('./bootstrap');

// Import modules...
import { createApp, h } from 'vue';
import { createInertiaApp, usePage } from '@inertiajs/inertia-vue3';
import { InertiaProgress } from '@inertiajs/progress';
import Auth from '@/modules/auth'

const el = document.getElementById('app');

createInertiaApp({
    resolve: (name) => require(`./Pages/${name}`),
    setup({ el, app, props, plugin, Auth }) {
        createApp({ render: () => h(app, props) })
            .mixin({ methods: { route } })
            .use(plugin) 
            .use(Auth) 
            .mount(el);
    },
}); 
InertiaProgress.init({ color: '#4B5563' });

Yukarıdaki gibi kullanmaya çalıştığımda derleme sırasında hata vermeyip aşağıdaki gibi kullandığımda

<button :disabled="can('edit')">Düzenle</button>

Tarayıcı konsolunda aşağıdaki hata mesajını veriyor.

Uncaught (in promise) TypeError: $props.can is not a function

Bendeki projede Vue3 kullanıyorum. Bu sorunu çözmek için neyi araştırmalıyım.

İyi günler dilerim.

trueWD · 5 Ağu 2021

Şurdaki paketi hiç incelediniz mi?
https://www.npmjs.com/package/@casl/vue/v/2.1.0

mgsmus · 5 Ağu 2021

MehmetCanYUMUTUTAN Benim verdiğim örnek Composition API kullanıyor, siz Options API ile yapmaya çalışmışsınız. Verdiğim örneğin Options API ile nasıl yapılabileceğine bakın. Ben Composition API ile Vue öğrendiğim için Options API ile ilgili bilgim yok. Ayrıca direkt benim verdiğim şekilde de Composition API ile de yapabilirsiniz. Vue 3 'de ikisini de kullanabiliyorsunuz.

BoraN7 · 5 Ağu 2021

Yetki sistemi için Vue tarafı ile uğraşmanıza gerek yok. Inertia JS bunun için var zaten. Controller tarafında Laravel'in Gate ve Policy'lerini kullanacaksınız, Vue tarafına 'can' ya da adına ne vermek isterseniz göndereceksiniz.

Ardından Vue componenti içerisinde o parametreyi props olarak Boolean şeklinde karşılayacaksınız.

Daha sonra v-if ile kontrolü çok basit yaparsınız.

@mgsmus 'un verdiği örnek anladığım kadarıyla klasik Vue JS uygulamalarında. Ancak dediğim gibi, Inertia JS kullanıyorsanız zaten amaç bu işlerle uğraşmamak. Kendi dokümantasyonunda da(https://inertiajs.com/) yazdığı gibi, Laravel tarafında halledebilirsiniz.

MMehmetCanYUMUTUTAN · 5 Ağu 2021

Cevaplarınız için teşekkür ederim.

Vue tarafında fazla uğraşmak istemiyorum. Inertia ile bana yetecek temizlikte kullanabiliyorum. Bu şekilde devam edeceğim.

İyi günler dilerim.

--Güncelleme: Yukarda bahsedilen tüm yöntemleri sağlıklı bir şekilde çalıştırabildim.

programmer1453 · 1 Eyl 2023

mgsmus
hocam breeze ile laravel inertia kullanıyorum can fonksiyonu template tagları içerisinde çalışırken <script setup> tagları içerisinde çalışmıyor aynı çekilde __() fonksiyonu yapmıştım dil için o da çalışmıyor , çözmenin bir yolu var mı ?

mgsmus · 1 Eyl 2023

programmer1453 Hata mı veriyor yoksa işlemi mi yapmıyor. Gelen verileri yapılan işlemleri console.log() ile loglamaya çalışın. Şu an test etme şansın yok açıkçası.

programmer1453 · 1 Eyl 2023

@mgsmus
__ is not defined
Hatası veriyor
log'a da düşürmeyi denedim ama olmadı
this.__ de this.can da denedim olmadı maalesef

MMehmetCanYUMUTUTAN · 1 Eyl 2023

Merhaba, şuradaki makalelere de göz atabilirsiniz.
https://inertiajs.com/authorization
https://codingoblin.com/roles-and-permissions-in-laravel-jetstream-inertiajs-using-spatie-package/

mgsmus · 1 Eyl 2023

programmer1453 Şöyle bir şey yapsak:

resources/js/modules/auth.js

import {usePage} from "@inertiajs/inertia-vue3"

export function useCan(permission) {
    return usePage().props.value.auth.user_permissions.includes(permission)
}

Sonra kullanacağınız yerde:

<script setup>
import { useCan } from '@/modules/auth'

const canEdit = useCan("edit")

if(canEdit) {
    // ...
}
</script>

<template>
    <div v-if="canEdit">...</div>
</template>

programmer1453 · 1 Eyl 2023

mgsmus
import {__,useCan} from '@/Modules/general'

import { usePage } from '@inertiajs/vue3';
export function __(key, replace = {}) {
    var translation = usePage().props.language[key]
        ? usePage().props.language[key]
        : key

    Object.keys(replace).forEach(function (key) {
        translation = translation.replace(':' + key, replace[key])
    });

    return translation
}
export function useCan(permission) {
    return usePage().props.auth.user_permissions.includes(permission)
}

@mgsmus
Bu şekilde çalıştı, Çok Teşekkür ederim, Allah razı olsun

programmer1453 · 1 Eyl 2023

MehmetCanYUMUTUTAN
Merhabalar, Önerileriniz için çok teşekkür ederim.
Fakat önceki projelerden alışık olduğum için Vue tarafında fonksiyon olarak kullanmak daha kolayıma geliyor.