多くの私のコンポーネントは、ユーザーがログインしているかどうかに基づいて動作する方法を変更します。ユーザーがReactにログインしている場合のグローバルな追跡方法？
ローカルストレージに有効なjwtトークンがある場合、ユーザーはログインしています。
これを気にかけて初期化するすべてのコンポーネントの状態に 'isLoggedIn'ブール値を追加できますが、これは多くの冗長性をもたらします。
すべてのコンポーネントが簡単にアクセスできるグローバルな小道具や状態を持つ方法はありますか？おそらく、将来的には 'isLoggedIn'を超えて私はユーザー名や物事などのユーザーに関する他の情報を持っていますか？
私は私のプロジェクトの1つにかなり似ています。
store.dispatch(tryAuthenticateFromToken());
ReactDOM.render(
<Provider store={store}>
<Router history={browserHistory} />
</Provider>,
document.getElementById('root')
);
私の解決方法は、レンダリングする直前にログインイベントをストアにディスパッチすることです。 似たようなことができます。
次に、減速機でそのイベントを解析し、店舗のどこかにトークンを保存します。 その後、ストアの他の変数として使用して、対応するコンポーネントに渡して、ログインステータスに基づいて別のレンダリングを行うことができます。
私はこのソリューションの潜在的な落とし穴について教えていただけたら、私はそれを聞いてうれしいと思うreduxと私はこのようなアプリの再レンダリングを強制しようとしています！
class App extends React.Component {
constructor(props){
super(props);
this.updateCurrentUser = this.updateCurrentUser.bind(this)
this.state = {
currentUser:new CurrentUser(this.updateCurrentUser)
}
this.logUser = this.logUser.bind(this)
}
render() {
return (
<div>
<h4>{"User is logged " + (this.state.currentUser.isLoggedIn()?'in':'out')}</h4>
<button onClick={this.logUser}>Log in</button>
</div>
);
}
logUser(){
this.state.currentUser.logIn();
}
updateCurrentUser(currentUser){
this.setState({
currentUser:currentUser
})
}
getCurrentUser(){
return this.state.currentUser
}
}
class CurrentUser {
constructor(onChange){
this._isLoggedIn = false;
this.onChange = onChange
this.logIn = this.logIn.bind(this);
}
/**
* Log user into the web app
* @param {string} email
* @param {string} password
* @param {function} success callback
* @param {function} fail callback
* @return {void}
*/
logIn(){
//fake request
setTimeout(()=>{
this.setProperty('_isLoggedIn',true)
},1500)
}
isLoggedIn(){
return this._isLoggedIn === true
}
setProperty(propertyName,value){
this[propertyName] = value
// update func passed from app
// updates app state
this.onChange(this)
}
}
ReactDOM.render(<App />,document.getElementById('app'))<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>
私はあなたがwindow.jwt' 'にトークンを持っていると仮定？もしそうなら、ただそこから直接読んでください。あなたはあなたの状態でそれを持つ必要はありません。 – Chris
ここにReduxタグがあります。あなたはそれを使用できるはずです。私たちがお手伝いできるReduxコードはありますか？ –
@Chrisレンダリング機能でlocalStorage.GetItem（ 'jwt'）を使ってみましたが、localstorageが未定義であるというエラーが表示されていましたので、これはオプションではないと仮定しました。 – tweetypi