reactjs - React: render props を使用してロールベース認証を実装する方法

Question

render props を使用してロールベースの認証を実装したいと考えています。3 つのユーザー タイプがあり、各ユーザー タイプに、ナビゲーション バーのさまざまな部分とアプリケーションのさまざまなページへのアクセスを許可したいと考えています。

実装方法がわかりません。何か提案はありますか？HOCを使用してみましたが、うまくいきませんでした。

Answer 1

これがそれを行う1つの方法です。

ユーザーがローカルストレージに保存されていると仮定すると（またはreduxの状態で保存できます）、

var user = localStorage.getItem('user')
if (user) {
   user = JSON.parse(user)
}

内側return()：

            <Switch>
                {/*any user*/}
                <Route exact path='/' component={Home}/>
                <Route exact path='/home' component={Home}/>
                <Route exact path='/about' component={About}/>
                <Route exact path='/contact' component={Contact}/>
                <Route exact path='/register' component={Register}/>

                {/*admin*/}
                {user && user.role === "ADMIN" &&
                <>                  
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                </>

                {/*user*/}
                {user && user.role === "USER" &&
                <>                  
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                    <Route path='...' component={...}/>
                </>

                <Route component={NotFoundPage}/>
            </Switch>