React Router - обрабатывать 403 ответа от сервера и компонента рендеринга - PullRequest
Новая
       46

React Router - обрабатывать 403 ответа от сервера и компонента рендеринга

1 голос
/ 04 мая 2020

В моем приложении я использую connected-react-router следующим образом: 

render() { 

// .... some code

   return 
        <ConnectedRouter history={history}>
            <Switch>
               <Route 
                   path="/sample/route"
                   component={SampleComponent}
               />
               <Route 
                   path="/another/sample/route"
                   component={AnotherSampleComponent}
               />
               <Route 
                   component={NotFoundComponent}
               />
            </Switch>
       </ConnectedRouter>

Это прекрасно работает для рендеринга компонента NotFound для любых маршрутов, которые не существуют.

Однако, когда пользователь пытается получить доступ к /sample/route в своем браузере, сервер моего приложения выполняет некоторые проверки подлинности, чтобы проверить, авторизован ли пользователь для доступа к этому маршруту.

Если нет, сервер возвращает 403 следующим образом: 

   ctx.status=403
   ctx.body="Unauthorised"
   return ctx

Я хотел бы перехватить этот код ответа 403 и отобразить компонент, который я определил в моем клиенте Код React, похожий на NotFoundComponent. В данный момент пользователь видит белую страницу с Unauthorised, написанной на ней. Есть ли способ, которым я могу сделать это? Я хотел бы избежать копирования компонента на мой сервер и возврата его оттуда.

1 Ответ

0 голосов
/ 04 мая 2020

Нет способа перехватить обработку маршрута на стороне сервера при непосредственном открытии (но щелчки могут *) . Вместо того, чтобы копировать и вставлять ваш код, вы можете заставить свой сервер возвращать ваше приложение реакции на 403 с, как это происходит на всех других маршрутах. Затем вы можете добавить соответствующий маршрут реакции и создать, например, форму входа. Чтобы избежать коллизий, маршруты приложений часто помещаются в под-маршрут, такой как /myapp/, /api/ или в совершенно другой (под) домен.

* Когда вы определяете соответствующий маршрут и используете <Link> тег вместо <a> будет перехвачен щелчок.

...