React Router Access Control

Question

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

<Route path='/(one|two|three)/' component={View} /> 

Я хочу сделать некоторый контроль доступа, чтобы только определенные пользователи могли получить доступ к различным конечным точкам. Это выглядело бы как «Вы являетесь частью группы, которая разрешает доступ к представлению 1, но представлению 2 и 3 отказано».

Возможно ли это на маршруте, определенном так? Будет ли проще отдельно определить маршруты, а затем определить авторизацию?

Любая помощь будет потрясающей!

Answer 1

Я добился успеха в создании компонента PrivateRoute или AuthenticatedRoute, который проверяет разрешения и затем решает, следует ли отобразить какой-либо компонент или перенаправить на страницу входа в систему или на другую соответствующую страницу.

Вотполный учебник .

Одна сложность, которую не охватывает учебник, заключается в том, что вы не хотите проверять просто , если пользователь вошел в систему, но также и то, чторазрешения, которые они имеют, и делают их разрешения, удовлетворяют условиям для маршрута. Вы можете определить это как хотите. Вы могли бы потребовать, чтобы у пользователя было как минимум 1 из списка разрешений, вы могли бы потребовать, чтобы у него был весь список разрешений.

Для вашего случая у меня просто было бы 3 PrivateRoute с такими:

<PrivateRoute path='/one' component={View1} permissionsRequired={["View1Permission"]}/> 
<PrivateRoute path='/two' component={View2} permissionsRequired={["View2Permission"]}/> 
<PrivateRoute path='/three' component={View3} permissionsRequired={["View3Permission"]}/> 

И если пользователь пойдет на один из маршрутов, PrivateRoute проверит, есть ли у него разрешение, и если они имеют, то отобразит View, а если нет, то перенаправит накакая-то подходящая страница, к которой у них есть доступ.