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

MainLayout ve rollere göre Dinamik Bileşenler

isset

Şimdilik 3 adet kullanıcı rolumü v-iflerle çözdüğüm bir MainLayout yapım var kullanıcı rolune göre sidebar içinde link gösteriyorum ..
ilerde yeni roller eklmek istersem sürekli MainLayout için v-if , v-else yazmak yerine bunu dinamik hale getiremezmiyim yada nasıl getirebilirim ? Ayırca sidebar sadece bir örnek role göle MainLayout içine farklı componentlerda import etmem gerekiyor,

Aslında birazda Business logic tarafını soruyorum vue.js yada blade hangi şablonu kullanılır olursa olsun mutlaka aranızda 9-10 kullanıcı rolü ile çalışan vardır 10 adet kullanıcı için 10 adet farklı main layout oluşturuyo olamazsınız heralde ?

mkeremcansev

Ben genelde Rol ve yetkileri gruplayıp Backend tarafından gönderiyorum ve ona göre kontrol ediyorum. Frontend tarafında da bir json ile menü item değerlerini oluşturup permission propertisi vererek kontrolü sağlıyorum. Yani şöyle;

Backend tarafında rol ve yetki tanımlamaları yapıldı, bu rol ve yetkilere göre işlemler kontrol altına alındı
Kullanıcı tarafından gelen istek tarafına yanıt olarak dönülen json içerisinde kullanıcıya ait rol ve yetkilere gruplanarak gönderildi
Frontend tarafında istekten dönen yanıt içerisinde gruplanan rol ve yetkiler alındı ve localStorage içerisine yazıldı
Menü içerisindeki değerler listelenirken kullanıcının yetkilerine göre gizleme veya gösterma olayları yapıldı

Örnek proje olarak Vue değil de Angular ile daha önce yazdığım bir projeyi paylaşıyorum. Daha farklı yöntemler de olabilir ama ben bunu kullanıyorum.

Örnek proje; https://github.com/mkeremcansev/ww-commerce-angular

Not: Router tarafında rol ve yetki durumuna göre de kontrol ederseniz layout ayağa kalktığında kullanıcı herhangi bir durumu manipüle ederse sayfada direkt 404 gösterebilirsiniz. (Backend tarafından zaten yetki hatası dönecektir ama sayfaya hiç erişememesi için bu yolu izleyebilirsiniz.)

isset

Teşekkür ederim. ben jetstrteam ile vue.js ve inertia yıgını kullandığım için rol ve yetkilerim frontende var, localStorage ile uğraşmıyorum hiç . Ben frontend tarafında v-iflerle hiç uğraşmadan daha dinamik çözümler varmı diye bakınıyordum.

Sidebar.vue içinde import ettiğim SidebarContent.vue dosyamdaki linkleri v-if ile role göre göster/gizlemek yerine auth olmuş kullanıcının rolune göre SideberContentStudent , SidebarContentEditor dosyalarından hangisinin yükleneceğini ayarlamaya çalışabilirmiyim diye araştırıyorum

mgsmus

isset <component> kullanarak yapabilirsiniz:
https://vuejs.org/api/built-in-special-elements.html#component

Mesela

<template>
  <div>
    <component :is="sidebarContent"></component>
  </div>
</template>

<script setup>
import SidebarContentStudent from './SidebarContentStudent.vue'
import SidebarContentEditor from './SidebarContentEditor.vue'
import { computed } from 'vue'
import { usePage } from '@inertiajs/vue3'

const { props } = usePage()

const sidebarContent = computed(() => {
  switch (props.value.auth.user.role) {
    case 'student':
      return SidebarContentStudent
    case 'editor':
      return SidebarContentEditor
  }
})
</script>

isset

iyi fikirmiş teşekkurler