Yetkilendirme için Private ve Public component ayrımı

[sametcodes]

Yetkilendirme (authentication) yapılmış bir sayfada public durumu için LoginForm gibi bileşenleri ayrı olarak yazıyoruz. Peki bunlar dışında yetkilendirilmiş bir sayfada spesifik bir alan için en iyi şekilde bunu nasıl yönetebiliriz? Örneğin Header kısmında giriş yap butonu yerine artık kullanıcıyla ilgili bir menü gelecek. session ? "kullanıcı bilgisi" : "giriş yap" şeklinde kullanım kodun okunmasını karıştırıyor. Sadece bunun için bir component daha oluşturma fikri de cazip gelmiyor çünkü bu şekilde yönetmem gereken bir sayfa var. Yetkilendirilmiş sayfaların Public ve Private componentlerini ayrı olarak yazabilirim ama bu da doğru mu olur bilmiyorum.

Yani yapmak istediğim bileşeni dinamik kullanmak. Aşağıdaki şekilde SessionComponent bileşenini oluşturdum ve bunun içinde oturum kontrolü yaparak duruma göre Public veya Private child'ını dönüyorum. Ama burada da Private bileşenine menüyle ilgili metotları nasıl bağlayacağım sorusuna takıldım.

<Header>
    <img src="logo" />
    <Menus />
    <SessionComponent>
        <Public>
            Giriş yap
        </Public>
        <Private>
            Kullanıcı menüsü
        </Private>
    </SessionComponent>
</Header>

Props üzerinden bir şekilde bağlayabilirim ve dinamik bir yapı uğraşınca kurulur. Benim öğrenmek istediğim bu sorunun doğru çözümü nedir? Bunun için bir kütüphane var mıdır? React üzerinde bu nasıl yazılırsa daha dinamik bir yapı elde ederiz?

Teşekkür ederim :guardsman:

[abdurrahmanekr]

Daha önce böyle bir şey ile karşılaştım ama sayfanın bir yerinde bir sabit auth değerim vardı, ona göre her yeri if içinde bırakmıştım. ör:

render (){
    const auth = this.state.auth;
    return(
        <div>{auth ? 'oturumu kapat': 'giriş yap'}</div>
        ...
    )
}

Ama component ihtiyacım olacağını düşünmediğim için böyle bir yapıyı tercih ettim. Evet biraz korkunç duruyor :). Bu konunun üzerinde ben de birkaç şey araştırdım ama sanırsam bu işin oluru senin düşündüğün şekilde olmalı.

Menü ile ilgili methodları direkt bulunduğu component'den de verebilirsin bence

<Private>
    <ul>
        <li><a onClick={...buradan}>item</a></li>
    </ul>
</Private>