Uygulamada izin kontrolü nasıl yapılır React app (State in Redux'da bakım)?

Question

İzin kontrolü nasıl yapılır React? İki şekilde denedim. İzin kontrolünü ele almak için en iyi yolu hangisi daha iyidir?

Tip 1
İzinleri içeriğe göre geçirin. izin izne dayalı sahne dönüş bileşeni veya boş

class HomePage extends React.Component{ 
    getChildContext(){ 
    return {permission:this.props.permission} 
    } 
    render(){ 
    return <div> 
     <Permission check='Edit'> 
     <PopupMenu> 
      <div>Edit</div> 
     </PopupMenu> 
     </Permission> 
     <Permission check='Delete'> 
     <PopupMenu> 
      <div>Delete</div> 
     </PopupMenu> 
     </Permission> 
    </div> 
    } 
} 
HomePage.childContextType={permission:...} 
class Permission extends React.Component{ 
    render(){ 
     if(this.context.permissions.indexOf(this.props.check)!=-1) 
     return this.props.children 
     else 
     return null; 
    } 
} 

Tip 2
Kontrol mapStateToProps fonksiyonunda izin tatmin ve dönerseniz İzin bileşeni

class HomePage extends React.Component{ 
    render(){ 
    return <div> 
     <PopupMenu> 
      <div>{this.props.operation}</div> 
     </PopupMenu> 
    </div> 
    } 
    } 
function mapStateToProps(state){ 
    var operation=""; 
    if(state.permission=="Edit"){ 
     operation="Edit" 
    } 
    else if(state.permission=="Delete"){ 
     operation="Delete" 
    } 
    return {operation} 
} 
connect(mapStateToProps)(HomePage) 

Answer 1

ya çözüm gayet bağlamdan izinleri alır . İlk çözüm, "hepsi ya da hiçbir şey" iken ikinci çözüm çeşitli erişim seviyeleri sunuyor unutmayın. Yani sadece ihtiyaçlarınız ve kodlama stil tercihlerinize bağlıdır.