React Router-处理来自服务器和渲染组件的403响应

Question

在我的应用中，我正在使用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。有办法吗？我想避免将组件复制粘贴到我的服务器上并从那里返回它。

Answer 1

直接打开时没有办法拦截服务器端对路由的处理（但可以单击*）。除了复制和粘贴代码外，您还可以让服务器在403s上返回您的react应用，就像在其他所有路线上一样。然后，您可以添加相应的反应路线并呈现一个登录表单。为了避免发生冲突，应用程序路由通常置于/myapp/，/api/或完全不同的（子）域之类的子路由下。

*当您定义相应的路线并使用<Link>标记而不是<a>时，将截获点击。