reactjs - React：如何使用渲染道具来实现基于角色的身份验证

Question

我想使用渲染道具实现基于角色的授权。我有三种用户类型，我想让每种用户类型访问导航栏的不同部分和应用程序中的不同页面。

我不确定如何实施它，有什么建议吗？我尝试使用 HOC，但这对我来说不起作用。

Answer 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>