Erlaube dem Benutzer nur auf sein Dashboard zuzugreifen

Question

Ich habe vier verschiedene Layouts.

• HomeLayout - Homepage

• AdminLayout

• UserLayout

• AgentLayout

AdminLayout ist die Mutter für die Admin-bezogenen Seiten und UserLayout für Benutzer verwandt und so weiter. Ich habe Higher Order Component verwendet, um zu überprüfen, ob der Benutzer nicht authentifiziert ist, um sie zur Startseite umzuleiten. Es gibt noch eine andere Bedingung. Das heißt, wenn der Benutzer authentifiziert ist, aber wenn die Rolle des Benutzers nicht admin ist und der Benutzer versucht, auf AdminDashboard zuzugreifen, sollte er/sie zur Startseite und ähnlich wie andere weitergeleitet werden. Aber Agent kann auf UserDashboard zugreifen.

Die Rolle, die ich erhalten, ist in der Form

user_role = ['superadmin'] or ['enduser'] or ['agent'] or 
['enduser', 'agent']. 

Ein nicht andere Armaturenbrett außer Agent zugreifen sollen, können auch Mittel Armaturenbrett und Benutzer Armaturenbrett zuzugreifen. Für nicht authentifizierte Benutzer könnte ich zur Startseite umleiten, wenn zum Umlenken nicht authentifizierte Benutzer Armaturenbrett ohne loggin in

Der Code Zugriff funktioniert und ich habe folgendes Weg

const Redirection = prop => WrappedComponent => { 
    return class Redirection extends React.PureComponent { 
    render() { 
     const user_instance = JSON.parse(localStorage.getItem("user")); 
     if (!user_instance) { 
     return <Redirect to="/" />; 
     } else { 
     return <WrappedComponent {...this.props} />; 
     } 
    } 
    }; 
}; 

export default props => WrappedComponent => 
    connect(null, mapDispatchToProps)(Redirection(props)(WrappedComponent)); 

AdminLayout

class AdminLayout extends React.Component { 
    render() { 
    return (
     <div> 
     {this.props.children} 
     </div> 
    ); 
    } 
} 

export default Redirection()(AdminLayout); 

Die getan user_role ich bekomme von localStorage ist als

Answer 1

können Sie dies mit lodashtun. Hier ist der Link für sie

https://lodash.com/docs/4.17.4#intersection

In Ihrem Fall wird die Überprüfung nach

if (
     user_instance && 
     intersection(prop, user_instance["userInfo"]["user_role"]) 
      .length > 0 
    ) { 
     return <WrappedComponent {...this.props} />; 
     } else { 
     return <Redirect to="/" />; 
     } 

Sie können folgende snippet.Also kleben nicht vergessen lodash Dokumentation wie möglich zu prüfen, sehr hilfreich für Sie auf der ganzen Linie sein