用户认证后如何设置Apollo客户端？

IT技术 reactjs graphql apollo react-apollo apollo-client
2021-05-16 01:16:46

我对如何构建我的 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>
    );
  }
}

这是网络接口的创建：

const networkInterface = createNetworkInterface({
  uri: process.env.NODE_ENV === 'development'
    ? 'http://localhost:3000/graphql'
    : 'TBD',
});

networkInterface.use([
  {
    applyMiddleware(req, next) {
      if (!req.options.headers) {
        req.options.headers = {}; // Create the header object if needed.
      }

      getUserSession()
        .then(session => {
          // get the authentication token from local storage if it exists
          // ID token!
          req.options.headers.authorization = session
            .getIdToken()
            .getJwtToken();
        })
        .catch(err => {
          console.error('oh, this is bad');
        })
        .then(next);
    },
  },
]);

我如何组织这一点，以便 Apollo 客户端仅初始化和设置一次，并且仅在用户通过身份验证之后？

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

想法2

使用 Redux 跟踪用户状态，App用connect. 当用户进行身份验证时，这会触发 Redux 状态更改，该更改会触发App's componentDidUpdate，这可以为 Apollo 创建网络接口，从而导致重新渲染，App其中会将授权传递client给<ApolloProvider client={client}>.

3个回答

我通常会从 redux 中监听“isLoggedIn”字段设置为 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>
        );
}

我使用 ApolloClient 示例http://dev.apollodata.com/react/auth.html#Header

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();
  }
}])

该块applyMiddleware将始终在获取到 GraphQL 服务器之前运行，因此您只需要localStorage在登录时设置并在注销时删除。

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

setContext will take care of that for you
其它你可能感兴趣的问题
上一篇Creality Ender 3：高速层移 下一篇我的 3D 打印机显示内置设计，但我的设计不可见