reactjs - 找到路由器(用于中继现代) protected 身份验证路由

Question

我正在尝试创建一个 protected 路由，当用户未根据 React Router 给出的示例使用 Found Router for Relay Modern 获得授权时，该路由将重定向到 /login:

const PrivateRoute = ({ component: Component, ...rest }) => {
  return (<Route {...rest} render={props => {
    if (!props) return
    if (Component && props && props.viewer) {
      return (<Component {...props} />)
    } else {
      throw new RedirectException('/login')
    }
  }}
  />)
}

我将 fakeAuth 替换为真实的登录逻辑，但其余部分是相同的。路线只是不渲染。

Found Router 似乎很少提供有关此特定问题的示例。有什么想法吗？

Answer 1

我最终将登录和经过身份验证的路由分开:

export default makeRouteConfig(
  <Route>
    <LoginRoute exact path='/login' Component={Login} query={LoginQuery} />
    <PrivateRoute path='/' Component={App} query={AppQuery}>
  </Route>
)

并为 LoginRoute 扩展路由，如下所示:

export class LoginRoute extends Route {
  render({ Component, props }) {
    if (!props) return undefined
    if (Component && props && props.viewer) {
      throw new RedirectException('/')
    }
    return (<Component {...props} />)
  }
}

PrivateRoute 看起来非常相似，但在没有查看者的情况下具有不同的重定向。

效果很好。

该项目的创建者 Jimmy Jia 有一些其他建议，我最终没有使用，但可能对 future 的读者有用。请参阅我已关闭的问题 here .