İstemci tarafı ReactJS izinlerini uygulayın veya uygulamaları birden çok dosyaya bölün.

Question

TL; DR: İstemci tarafı izinleriyle erişimi kısıtlayın veya uygulamaları ayrı dosyalara bölün ve her dosyaya erişimi kısıtlayın.

Çok sayıda küçük istemci tarafı uygulaması oluşturmak için ReactJS (React Router ile birlikte) kullanıyorum. Aradaki işçiler tarafından, aralarında çok fazla değişmeden kullanılacaktır.

Symfony2'yi arka uç olarak kullanıyorum. Sunucu tarafından oluşturulmuş uygulamalar/sayfalar için önceden ayarlanmış izinlerim var. (Uygulamalar Tepki ait)

Şimdiye kadar tüm kullanıcılar aynı izinlere gerekli, bu yüzden ana vermektedir sayfaya sadece kısıtlayan erişimi olan uzak kazanılmış ettik ki, çok dosyası (ve API app.js elbette). Ancak şimdi bu uygulamalardan bazılarını belirli kullanıcılardan gizleyebilmem gerekiyor.

1. ayrı paketlenmiş dosyalar halinde uygulamalar yukarı Tepki ve sadece uygun sayfa hizmeti Gözat Symfony2'nin sunucu tarafı yaklaşımdır
2. bölünmüş tamamlayan bir istemci tarafı izinleri sistemi uygulamak: Onu görmek gibi ben iki seçenek var doğru izinleri sahipleri

Seçenek 1 projeye karmaşıklık çok eklersiniz ve öğreticiler yolunda çok var orada değil gibi ben, ben bile başlayacaktı nasıl hiçbir fikrim yok. (Bu arada, kullanıcıların istemci tarafı kodunu denetleyip koruma alanlarına girip girmedikleri önemli değil, çünkü temel veriler API aracılığıyla korunur.) Ancak bu, tek bir kod tabanı ve daha iyi anlamına gelir. önbelleğe alma, React gibi tüm satıcı kodları yalnızca bir kez indirilebileceğinden.

Seçenek 2, bir istemci tarafı izin sistemi oluşturmak zorunda kalmamak anlamına gelebilirdi, her uygulama daha basit ve mevcut sunucu tarafı izinler sistemime düzgün bir şekilde sığardı. Bununla birlikte, çok daha az esnek olur ve birçok dosya nedeniyle aynı satıcı kodunu birden çok kez sunmak anlamına gelir.

Hangi yaklaşımı kullanmalıyım?

Answer 1

Yorumlarınızla ilgili olarak, bir bileşenin izin düzeyine göre gösterilmesine/gösterilmemesine karar vermenin basit bir çözümü, bir sarma bileşeni oluşturmaktır.

... 

let DumbPermissionLevel = ({userLevel, levelRequired, children}) => { 
    if (userLevel < levelRequired) 
     return null; 
    return children; 
}; 

let PermissionLevel = connect(
    (state) => ({ 
     userLevel: state.user.permissionLevel // Wherever your user permission level is stocked in your state 
    }) 
)(DumbPermissionLevel); 

... 

Daha sonra sadece bu gibi kullanabilirsiniz: Elbette

const LARVA = 0; 
const MODERATOR = 1; 
const ADMIN = 2; 
... 
<p>Everybody will see this.</p> 

<PermissionLevel levelRequired={MODERATOR}> 
    <p>Only moderators and admin will see this !</p> 
</PermissionLevel> 

<PermissionLevel levelRequired={ADMIN}> 
    <p>Only admins will see this !</p> 
</PermissionLevel> 

, bu istemci koduna arka uç sunucudan kullanıcı izni düzeyinde iletmek anlamına gelir.
Bunun için createStore() ikinci bağımsız değişkenine bakın.