Laravel Türkiye Discord Kanalı Forumda kod paylaşılırken dikkat edilmesi gerekenler!Birlikte proje geliştirmek ister misiniz?

Laravel + Inertia Permission

MehmetCanYUMUTUTAN

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

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

MehmetCanYUMUTUTAN

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.

mgsmus

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')) {
            //...
        }
    }
}

BoraN7

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

MehmetCanYUMUTUTAN

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"

MehmetCanYUMUTUTAN

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.

MehmetCanYUMUTUTAN

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.

programmer1453

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

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.

trueWD

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

BoraN7

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.

MehmetCanYUMUTUTAN

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.

mgsmus

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

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

mgsmus

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>

MehmetCanYUMUTUTAN

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

programmer1453

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.

programmer1453

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