Как использовать аутентификацию на основе ролей в response-router-dom?
Я видел, что на этот вопрос есть много ответов. Но здесь мой вопрос и мой существующий код отличаются. Я использую следующий модуль NPM для маршрутизации в моем приложении реакции.
import { Route, Switch, BrowserRouter } from 'react-router-dom';
А это файл маршрутизации моего приложения. https://gist.github.com/chanakaDe/241daafbc94df8543bced3695c7b7169
Я хочу использовать для этого систему аутентификации на основе ролей. Все роли сохраняются в локальном хранилище, и мне нужен способ проверить их, когда использование идет по маршруту. Я новичок в реакции. Пожалуйста, помогите мне решить эту проблему.
Нужно ли мне использовать отдельный файл для получения всех ролей из локального хранилища или мы можем сделать это внутри файла маршрутизации? Пожалуйста посоветуй
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Вы можете сделать настраиваемые компоненты Route для обработки данного типа маршрута. Например, если у вас два маршрута:
1) Админ-маршруты 2) Хост-маршруты
затем вы создадите один компонент, который будет использовать role в качестве реквизита, а затем, используя этот компонент, вы вернете маршрут, который вам нужно визуализировать.
Небольшой пример показан ниже:
class ResolveRoute extends React.Component {
render () {
const role = this.props.role
return (
{
() => {
if (roles === "admin") {
<Route ...this.props />
}
else if (roles === "host") {
<Route ...this.props/> // Render the routes that have host roles.
}
else {
<Redirect to = "/" /> // or Not found error page.
}
}
}
)
}
}
Отличная поломка здесь tylermcginnis.com/react-router-protected-routes-authenticati на