找到路由器(用于接力现代)受保护的身份验证路由

时间:2018-02-10 21:25:30

标签: reactjs graphql relaymodern

我正在尝试创建一个受保护的路由,根据React路由器提供的示例,当用户未使用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,但其余的都是一样的。路线不会渲染。

发现路由器似乎很清楚这个特定问题的例子。有什么想法吗?

1 个答案:

答案 0 :(得分:2)

我最终拆分了我的登录和验证路线:

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有一些其他的建议,我最终没有使用,但可能对未来的读者有用。请参阅我已关闭的问题here