我对如何构建我的 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>
);
}
}
这是网络接口(interface)的创建:
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
的componentDidUpdate
它可以为 Apollo 创建网络接口(interface),导致 App
中重新渲染。这将通过授权 client
进入<ApolloProvider client={client}>
.
最佳答案
我通常会监听 redux 中的“isLoggedIn”字段设置为 true。当它设置为 true 时,我会渲染完整的应用程序并添加身份验证 header ,以便该函数将 JWT token 添加到所有 future 的请求中。
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>
);
}
关于reactjs - 如何仅在用户身份验证后设置 Apollo 客户端?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44509832/