我对如何构建我的 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 客户端仅被初始化和设置once,并且只有在用户通过身份验证之后?
我想知道我是否可以使用与阿波罗 http://dev.apollodata.com/react/api.html#withApollo以某种方式直接访问客户端并以这种方式完成 GraphQL 身份验证和连接。
Idea 2
使用Redux跟踪用户状态,wrapApp
with connect
。当用户进行身份验证时,这会触发 Redux 状态更改,从而触发App
's componentDidUpdate
这可以为 Apollo 创建网络接口,从而导致重新渲染App
这将通过授权client
into <ApolloProvider client={client}>
.
我通常会监听 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>
);
}
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)