ダッシュボードにのみアクセスできるようにする

Question

4つのレイアウトがあります。

• HomeLayout - ホームページ

• AdminLayout

• UserLayout

• AgentLayout

AdminLayoutは、ユーザーのための管理に関連するページとUserLayoutの親であります関連するなど。 ユーザーが認証されていないかどうかを確認するためにHigher Order Componentを使用して、それらをホームページにリダイレクトしました。もう一つの条件もあります。つまり、ユーザーは認証されていますが、ユーザーの役割がadminではなく、ユーザーがAdminDashboardにアクセスしようとすると、ユーザーはホームページにリダイレクトされ、他のユーザーと同じようにリダイレクトされます。しかし、エージェントはUserDashboardにアクセスできます。

私が得る役割は、1つのエージェントを除いて、他のダッシュボードにアクセスしてはならない

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

があまりにエージェントダッシュボードやユーザーダッシュボードにアクセスできる形態です。 logginせずにダッシュボードにアクセスする際に認証されていないユーザーのために私はホームページにリダイレクトすることができ

に認証されていないユーザーにリダイレクトするためのコードが働いていると私は次のよう

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); 

私がlocalstorageから得たuser_roleは、JSON.parse(localStorage.getItem("user"))['userInfo]['user_role']

Answer 1

です。これは、lodashを使用して行うことができます。ここでは、チェックが

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

をお使いの場合には、それ

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

のリンク以下のことになるが、それができるようlodashドキュメントをチェックするのを忘れていないあなたは、次のsnippet.Alsoを接着することができますですあなたのために非常に便利です