Disini kita akan membuat 1 buah Utils Permission yang digunakan untuk pembatasan akses sesuai dengan roles & permissions yang dimiliki oleh user.
Langkah 1 - Membuat Utils Permission
Silahkan buat folder baru dengan nama Utils di dalam folder resources/js, setelah itu di dalam folder resources/js/Utils silahkan buat file baru dengan nama Permissions.jsx dan masukkan kode berikut ini :
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;
// 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;
});
return hasPermission;
}
Pada kode diatas pertama kita import usePage dari Inertia.
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.
export default function hasAnyPermission(permissions)
Berikutnya kita melakukan destructing sebuah props auth yang kita dapatkan dari share data global yang telah kita definisikan sebelumnya.
const { auth } = usePage().props
Selanjutnya kita mendefinisikan sebuah variabel baru dengan nama allPermissions, yang berisi data permissions yang diambil dari props auth.permissions.
let allPermissions = auth.permissions;
Berikutnya kita lakukan looping data permissions yang kita terima dari props, jika data ditemukan maka kita set hasPermissions dengan true
let hasPermission = false;
permissions.forEach(function(item){
if(allPermissions[item])
hasPermission = true;
});
Sumber : membuat-utils-permissions-dengan-inertia-react
Kesimpulan
Pada artikel ini, kita telah belajar Utils Permission Di Laravel Inertia React. Jika teman-teman ada kendala saat belajar, silahkan bisa bertanya melalui kolom komentar atau group Telegram SantriKoding
Semoga bermanfaat! 😊
Artikel ini dibaca sebanyak 4.906 kali
{ setTimeout(() => { showShimmer = false; }, 300); })"
:class="{'opacity-0': !loaded, 'opacity-100': loaded}"
class="lazy w-full h-auto rounded-xl border border-white dark:border-neutral-700/80 transition-opacity duration-500"
loading="lazy"
/>
SAWERIA
Memuat komentar...