Tutorial Inertia Roles & Permissions - #9 - Membuat Utils Permissions Dengan Inertia React

Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan belajar membuat sebuah utils untuk menghandle permissions yang kita miliki.

Rafi Taufiqurrahman
Dipublish 15/07/2024

Pada artikel kali ini kita akan membuat sebuah utlis , yang kita gunakan sebagai pembatasan akses sesuai dengan roles & permissions yang dimiliki oleh user.

Silahkan teman - teman buat file baru dengan nama Permissions.jsx , tapi sebelumnya silahkan teman - teman buat folder baru dengan nama Utils yang kita letakan di app/Resources/Js, setelah itu masukan kode berikut ini.

Permissions.jsx
import { usePage } from "@inertiajs/react";

export default function hasAnyPermission(permissions){

    // destruct auth from usepage props
    const { auth } = usePage().props

    // get all permissions from props auth
    let allPermissions = auth.permissions;

    // get super-admin role from props auth
    let superAdmin = auth.super;

    // define has permission is false
    let hasPermission = false;

    // loop permissions
    permissions.forEach(function(item){
        // do it if permission is match with key
        if(allPermissions[item])
            // assign hasPermission to true
            hasPermission = true;
    });

    // do it when super admin true
    if(superAdmin)
        // return true;
        return true;
    else
        // return has permissions
        return hasPermission;
}

Pada kode diatas pertama kita import usePage dari Inertia.

Permissions.jsx
import { usePage } from "@inertiajs/react";

Selanjutnya kita membuat sebuah React Functional Component dengan nama hasAnyPermissions pada react functional component tersebut kita juga mendefinisikan sebuah props permissions.

Permissions.jsx
export default function hasAnyPermission(permissions)

Berikutnya kita melakukan destructing sebuah props auth yang kita dapatkan dari share data global yang telah kita definisikan sebelumnya,

Permissions.jsx
const { auth } = usePage().props

Selanjutnya kita mendefinisikan sebuah variabel baru dengan nama allPermissions, yang berisi data permissions yang diambil dari props auth.permissions.

Permissions.jsx
let allPermissions = auth.permissions;

Kemudian kita juga mendefinisikan sebuah variabel baru dengan nama superAdmin, yang berisi data role yang diambil dari props auth.super.

Permissions.jsx
let superAdmin = auth.super;

Kemudian kita juga mendefinisikan sebuah variabel baru dengan nama hasPermission yang kita set nilai default-nya false.

Permissions.jsx
let hasPermission = false;

Berikutnya kita lakukan looping data permissions yang kita terima dari props, jika data ditemukan maka kita set hasPermissions dengan true.

Permissions.jsx
permissions.forEach(function(item){
    if(allPermissions[item])
        hasPermission = true;
});

Yang Terakhir kita lakukan pengecekan variabel superAdmin jika ada maka kita akan mengembalikan true jika tidak maka kita akan kembalikan sebuah hasil dari pengecekan permissions.

Permissions.jsx
if(superAdmin)
    return true;
else
    return hasPermission;

Artikel Lainnya

Beberapa artikel rekomendasi lainnya untuk menambah pengetahuan.

1
Tutorial Inertia Roles & Permissions - #14 - Membuat Module User Dengan Inertia React
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan membuat sebuah module user dengan inertia react.
2
Tutorial Laravel Livewire - #3 - Installasi Laravel Breeze & Livewire
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan melakukan installasi laravel breeze dan livewire sebagai starter-kit kita.
3
Tutorial Laravel Livewire - #8 - Membuat Module Category Dengan Livewire
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah module category dengan livewire.
4
Tutorial Laravel Livewire - #4 - Membuat Schema Database Dengan Laravel
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan membuat sebuah schema database yang nantinya akan kita gunakan pada study case kali ini dan kita akan memanfaatkan model dan migration dari laravel.
5
Tutorial Laravel Livewire - #2 - Installasi Project Laravel
Artikel ini merupakan series dari Tutorial Laravel Livewire Study Case Point Of Sales, disini kita akan mulai melakukan installasi project laravel kita dari awal menggunakan composer.
6
Tutorial Inertia Roles & Permissions - #6 - Membuat Relasi Antar Tabel Menggunakan Laravel Eloquent Relationship
Artikel ini merupakan series dari Tutorial Laravel Inertia Roles & Permissions, disini kita akan membuat relasi antar tabel menggunakan laravel eloquent relationship.

JurnalKoding

Mulai asah skill dengan berbagai macam teknologi - teknologi terbaru seperti Laravel, React, Vue, Inertia, Tailwind CSS, dan masih banyak lagi.

© 2025 JurnalKoding, Inc. All rights reserved.