Reputation: 21
Ok, so helo guys, it's my first post here, because I am desperated so much I will ask you for help.
I've got a problem with async request in redux-thunk.
Look:
I have react-redux-jwt authentication and I'm blacklisting old token on every request and with express middleware I'm sending a new one for requesting user. And when user ask a server with one of expired tokens (marked in database) then BOOM -> 401. BUT everything is fine, when my dispatching looks like this:
// imports
class Components extends React.Component {
// ...rest
firstTrigger(data) {
const {dispatch} = this.props;
dispatch(anyActions.firstAction(data));
}
secondTrigger(data) {
const {dispatch} = this.props;
dispatch(anyOtherActions.secondAction(data));
}
render() {
return <div >
// ... rest
<button onClick={this.firstTrigger}> Trigger 1 </button>
<button onClick={this.secondTrigger}> Trigger 2 </button>
</div>;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
And fun begins when I've got to run some actions in one moment like this:
// imports
class Components extends React.Component {
// ...rest
anyTrigger(data) {
const {dispatch} = this.props;
dispatch(anyActions.firstAction(data));
dispatch(anyOtherActions.secondAction(data));
}
render() {
return <div >
// ... rest
<button onClick={this.anyTrigger}> Trigger two actions </button>
</div>;
}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
And now you guys propably guess whats going on there. First query going to server with custom axios request (with token ofc.), everything is fine, so it's do what I want, gets a new token and blacklists an old one and going to return with a brand new token AND THEN second action was dispatched and sended with old token (the same as was at first action), but this token was already blacklisted by first request and BOOM -> 401. I'm mad because of this. I'm tried almost everything: custom queue packages, flags in custom state, redux middlewares, sagas, buffering actions at middleware level...
Maybe it is a stupid question, but I'm grown in PHP and I have no idea how to solve this. Maybe you have any other secure way to handle JWT with react-redux? Or you have some ideas how to pause request till the previous one ends?
Oh, and sorry for my english, but I think you should understand what I've got to say.
Upvotes: 1
Views: 117
Reputation: 21
Solved, I Just stopped using redux middleware, and install interceptor from https://gist.github.com/mkjiau/650013a99c341c9f23ca00ccb213db1c Best solution at the moment for me.
Upvotes: 1