Реакция: Как использовать реквизит рендеринга для реализации аутентификации на основе ролей - PullRequest
Новая
       16

Реакция: Как использовать реквизит рендеринга для реализации аутентификации на основе ролей

1 голос
/ 05 июля 2019

Я хочу реализовать авторизацию на основе ролей, используя реквизит рендеринга. У меня есть три пользовательских типа, и я хочу дать каждому пользовательскому типу доступ к различным частям панели навигации и различным страницам в моем приложении.

Я не уверен, как это реализовать, какие-либо предложения? Я пытался использовать HOC, но это не сработало для меня.

1 Ответ

2 голосов
/ 05 июля 2019

Вот один из способов сделать это,

при условии, что пользователь хранится в локальном хранилище (или вы можете сохранить его в состоянии избыточности), 

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