Question

我正在尝试使用私有路由方法在我的graphql react app中应用受保护的路由。我正在使用apollo客户端2。

私人路线按预期工作，即保护/阻止某人手动输入网址（在本案例中为/调查）。但是，当手动重新加载或刷新页面时，graphql查询最初将返回空对象数据（当用户登录时）或未定义的数据。因此，应用了私有路由内的重定向条件，因此客户端被重定向到“/”路径。有没有办法解决？这是我的应用程序和我的私人路线代码：

/* app.js */
....imports

const WHOAMI = gql`
  query whoAmI {
    whoAmI {
      _id
      email
    }
  }
`;

class App extends Component {
  render() {
    return (
      <div>
        <BrowserRouter>
          <div>
            <Header />
            <Query query={WHOAMI}>
              {({ loading, error, data }) => {
                // console.log(data);
                return (
                  <div className="container">
                    <div className="col s12 center-align">
                      <Switch>
                        <Route path="/surveys/new" component={SurveyNew} />
                        <PrivateRoute
                          path="/surveys"
                          userId={data.whoAmI}
                          component={SurveyList}
                        />
                        <Route path="/" exact component={LandingPage} />
                      </Switch>
                    </div>
                  </div>
                );
              }}
            </Query>
          </div>
        </BrowserRouter>
      </div>
    );
  }
}

export default App;

和我的PrivateRouter文件

...imports 

const PrivateRoute = ({ component: Component, userId, ...rest }) => (  
  <Route {...rest} render={props => (
    !userId || userId === 'undefined' ? (
      <Redirect to={{
        pathname: '/'
        }}
      />
    ) : (
      <Component {...props} />
    )
  )} />
);


export default PrivateRoute

Answer 1

我可能有相同的架构而且

class App extends Component {
  constructor (...args) {
    super(...args)

    this.state = {
      user: {},
      loading: true
    }
  }

  componentDidMount() {
    fetchUser()
      .then(user => {
        this.setState({
          user,
          loading: false
        })
      })
  }

  render () {
    if (this.state.loading) {
      return <LoadingPage />
    } else {
      return (
        <ApolloProvider client={client}>
          <BrowserRouter>
            ...
          <BrowserRouter />
        </ApolloProvider>  
    }
}

apollo客户端查询受保护的路由

1 个答案: