应用程序加载前的 ReactJS 身份验证重定向

Question

我正在设计一个由多个组件组成的 React 应用程序。

在我的组织中，他们使用一种身份验证机制，其中需要检查特定的 cookie；如果可用用户被视为已通过身份验证并被允许查看应用程序。如果 cookie 不存在/已过期，则需要将用户定向到一个特定的 URL，他可以在其中填写他的用户 ID 和密码，然后该 URL 将他连同有效的 cookie 一起重定向到原始应用程序。

我在想如何在我的 React 应用程序中实现这一点......我知道有 componentWillMount 方法，但用户不应该在加载任何组件之前先进行身份验证吗？

如何实施？

指导赞赏

干杯

Answer 1

如果您使用的是 react-router，则必须创建受保护的路由组件，它会检查用户是否已通过身份验证。

然后你的路由文件应该是这样的：

import { Route, Redirect, BrowserRouter } from 'react-router-dom'

    const ProtectedRoute = ({ component: Component, ...rest }) => (
      <Route {...rest} render={props => (
        auth.isAuthenticated ? (
          <Component {...props}/>
        ) : (
          <Redirect to={{
            pathname: '/login',
            state: { from: props.location }
          }}/>
        )
      )}/>
    )

export const Routes = () => (

    <BrowserRouter>
      <Route path='/' component={Index}/>
      <ProtectedRoute path='/access' component={Access}/>
    </BrowserRouter>

)

有关更多详细信息，请查看有关身份验证重定向的官方示例。