Reactjs 如何仅在用户验证后设置Apollo客户端？

我对如何构造React/GraphQL（Apollo）应用程序有点困惑，因为在用户验证/登录之前不应该建立连接

目前我有：

class App extends Component {
  render() {
    return (
      <ApolloProvider client={client}>
        <Provider store={store}>
          <Router>
            <div>
              <ul>
                <li><Link to="/">Home</Link></li>
                <li><Link to="/login">Log In</Link></li>
                <li><Link to="/signup">Sign Up</Link></li>
              </ul>
              <AuthenticatedRoute exact path="/" component={HomePage} />
              <Route path="/login" component={LoginPage} />
              <Route path="/signup" component={SignupPage} />
            </div>
          </Router>
        </Provider>
      </ApolloProvider>
    );
  }
}

我如何组织它，使Apollo客户端只初始化和设置一次，并且仅在用户进行身份验证之后

我想知道我是否可以用某种方式直接访问客户机并以这种方式完成GraphQL身份验证&连接

想法2 使用Redux跟踪用户状态，将

应用程序

包装为

连接

。当用户进行身份验证时，这会触发Redux状态更改，从而触发

App

的

componentDidUpdate

，该组件可以为Apollo创建网络接口，导致在

App

中重新渲染，从而将授权的

客户端

传递到

中。我通常会监听“isLoggedIn”要从redux设置为true的字段。当设置为true时，我呈现完整的应用程序并添加身份验证头，以便该函数将JWT令牌添加到所有未来的请求中

import React, { Component } from 'react';
import { ApolloProvider } from 'react-apollo';
import makeStore from '../../store';
import createClient from '../../ApolloClient';

class Sample extends Component {
    login() {
       // login logic here;
    }
    routeTo() {
        // use props or state;
        let isLoggedIn = this.props.isLoggedIn || this.state.loggedIn;
        if(isLoggedIn) {
            const client = createClient(myToken);
            const store = makeStore(myToken);
                return (
                <ApolloProvider store={store} client={client} > 
                    <Routes screenProps={this.state}  />
                </ApolloProvider>);
        } else {
            return <LoginUI onPress={()=>this.login()}/>;
        }
    }
    render() {
        return(
         <div>
            {this.routeTo()}
          </div>
        );
}

import React，{Component}来自'React'；
从'react apollo'导入{ApolloProvider}；
从“../../store”导入makeStore；
从“..//ApolloClient”导入createClient；
类示例扩展组件{
登录（）{
//这里的登录逻辑；
}
罗特托（法国）{
//使用道具或状态；
让isLoggedIn=this.props.isLoggedIn | | this.state.loggedIn；
如果（isLoggedIn）{
const client=createClient（myToken）；
const store=makeStore（myToken）；
返回(
);
}否则{
返回this.login（）}/>；
}
}
render（）{
返回(
{this.routeTo（）}
);
}

我使用Apollo客户端示例

---

块

applyMiddleware

在获取GraphQL服务器之前将始终运行，因此您只需在登录时设置

localStorage

，在注销时删除即可。

使用WebSocket时如何？（ws）我只是把自己剪辑成这个，所以当有人回答这个问题时，我会收到一个通知^

  const token = request.authToken; // localhost.get('authetoken)
  return {
    headers: {
      ...headers,
      Authorization: `Bearer ${token}`,
    },
  };
});```

setContext will take care of that for you 

networkInterface.use([{
  applyMiddleware(req, next) {
    if (!req.options.headers) {
      req.options.headers = {};  // Create the header object if needed.
    }
    // get the authentication token from local storage if it exists

    const token = localStorage.getItem('token');
    req.options.headers.authorization = token ? `Bearer ${token}` : null;
    next();
  }
}])

  const token = request.authToken; // localhost.get('authetoken)
  return {
    headers: {
      ...headers,
      Authorization: `Bearer ${token}`,
    },
  };
});```

setContext will take care of that for you