Unable to dispatch redux actions in axios success response interceptor - javascript

Usually we dispatch actions in Axios error response interceptor and it works fine
axiosInstance.interceptors.response.use(
(next) => {
return Promise.resolve(next);
},
(error) => {
// Dispatching to handle error 1
if (error.response.status === 401) {
if (error.response.data.errorCode === 'USER_LOGIN_ERROR_008') {
store.dispatch({ type: 'RESET_SECURITY_QUESTION', payload: { id: null, qid: null, question: null } });
}
throw error;
}
);
Every successful API response sets a token in user's cookies and if no API is called in the next X minutes then that token will expire
So after every successful API response I need to start a timer in my App.js and once that timer ends would show a Modal to the user that his session has been invalidated
However if a user's actions result in successful API calls then I want to reset that timer
To reset that timer I would want to call a redux action after every successful API response
So this is what I tried to do
axiosInstance.interceptors.response.use(
(next) => {
console.log(`Intercepting ${next.config.url} success response`, next);
if (next.status === 200) {
store.dispatch(incrementSessionRefreshTimer());
}
return Promise.resolve(next);
},
There is an problem here
Whenever we use axios interceptor to intercept success request, We can modify the request and have to return the request back
What happens in my code is that my action is dispatched but the response is never returned, No lines below store.dispatch(myAction()) are executed and hence the Component in which I made an API call does not get the success response
Any workaround for this?

The code should definitely continue executing after that dispatch. It might cause an immediate rerender, in which case the rerender might happen before the next line, but unless an exception is thrown anywhere, that return Promise.resolve(next); line will execute. I think your problem lies elsewhere.

Related

Call an api within .subcribe next in Angular

Essentially I am trying to edit a user, and calling the editUser method in my authService. Edit user in the auth service is just a HTTP post request.
this._authService.editUser(this.edit).subscribe(res=>{this.getUsers(this.params)}, (err)=>{alert(err)})
Now after editing the user, I wanna refresh the entire User list again. therefore I am calling the getUser method inside the .subscribe next field. The getUser method in the authservice is also a HTTP POST request.
getUsers(search){
this._authService.getUser(search).subscribe(
res => {
this.persons = res
},
error => {
if(error.status == 0) {
alert("The servers are down right now, try again later")
}
else{
alert(error.error.msg)
}
}
);
}
The problem with this is that it doesnt always refresh the persons list. Sometimes it does and sometimes it doesnt

Alert() pops up twice in axios interceptor (Vue.js)

In my Vue app, I instantiate a single instance of axios and use it across the app for HTTP requests. I have set up a response interceptor which checks if any response from the backend is 401 unauthorized, and if so, shows an alert message. This basic flow has been implemented, but you need to hit "OK" on the alert message twice for it to go away, and I am not sure why.
Axios instance:
import axios, { AxiosError, AxiosInstance, AxiosResponse } from 'axios';
const axiosInstance: AxiosInstance = axios.create();
axiosInstance.interceptors.response.use(
(response: AxiosResponse) => response,
(error: AxiosError) => {
if(error.response && error.response.status === 401) {
alert('There has been an issue. Please log out and then log in again.');
return Promise.reject(error);
}
}
);
export default axiosInstance;
The request whose response is being intercepted:
import axiosInstance from 'axios-instance';
public async getloggedInUserId() {
await axiosInstance.get('/sessions.json')
.then((response) => {
if(response.data.user_id) {
this.SET_USER_ID(response.data.user_id);
}
});
}
I've read this thread, but my issue seems to be different: Javascript alert shows up twice
I've tried changing the return statement from return Promise.reject(error); to return false; but that did nothing for me.
As Phil suggested in the comment above, looking at at the Network tab in the browser console helped me solve the issue. The console showed how each component in the page was being loaded along with the resulting response code. In short, two processes were actually returning 401, which was the reason why the alert was being called twice.
I have decided to move the code that calls alert from a global axios interceptor (called whenever any process returns 401) to a .catch block inside one specific axios process, so that it only gets called once.
Your promise throws error in axios error interceptor, and error called second times.

How should I handle JWT token refresh in my Redux app?

Our Redux application use JWT tokens for authentication. The access_token expires every 15 minutes and the refresh_token expires every 30 days. Both of them are provided by our API every time you log in and stored in the browser's local storage. If a secure endpoint receives a request with an expired token, it returns a 401 HTTP error.
Unfortunately, I don't know how to proceed to handle the refresh process without having a negative impact on the user. From a technical point of view, here is what I would like to achieve:
Action creator calls the API with an expired token
Client receives a 401 HTTP error
Client triggers a function that calls the API to obtain a new token (by providing the refresh token).
If the call fails (refresh_token is expired), prompt the user the re-enter its credentials to re-obtain both tokens then re-attempt the original request.
If the call succeeds, re-attempt the original request.
I would like to have a function that would handle the refreshing process and that would be called in the error handling portion of the action creator.
Here is what I have tried so far:
export function handleError(dispatch, current_func, error, handling) {
if(error.response) {
if(error.response.status === 401 && readToken("token") !== null) {
return attemptTokenRefresh(dispatch, current_func)
}
if(error.response.status === 422 && readToken("token") === null) {
return attemptTokenRefresh(dispatch, current_func)
}
}
return(handling())
}
export function attemptTokenRefresh(dispatch, on_success) {
let token = readToken("refresh_token");
let instance = axios.create({
headers: {"Authorization": token}
});
instance.post("api/refresh").then(response => {
if (response.data["token"]) {
storeToken("token", response.data["token"]);
on_success();
}
}).catch(error => {
//TODO: Allow user to sign back (prevent wiping the state)
});
}
dispatch refers to the dispatch function provided by Redux
current_func refers to the action creator
error refers to the error returned by the API
handling refers to the error handling function for other types of errors
Any help would be greatly appreciated :)

Angular 2 Http get not triggering

As said in the title, nothing is happening when I subscribe to my observable. There is no error in the console or during the build. Here is my code :
My service
getBlueCollars(): Observable<BlueCollar[]> {
return this.http.get(this.defaultAPIURL + 'bluecollar?limit=25').map(
(res: Response) => {
return res.json();
});
}
My component
ngOnInit() {
this.planifRequestService.getBlueCollars().subscribe(
data => {
this.blueCollars = data;
console.log('Inner Blue Collars', this.blueCollars);
},
err => console.log(err)
);
console.log('Value BlueCollars : ', this.blueCollars);
}
So the second console.log is triggering with "Value BlueCollars : Undefined", and the log in my subscribe is never showed. As well, I can't see the request sent in the Networt tab of Chrome.
So I tried to simplify everything with the following code :
let response: any;
this.http.get('myUrl').subscribe(data => response = data);
console.log('TestRep: ', response);
Same problem here, no error, response is undefined. It seems the subscribe is not triggering the observable. (The URL is correct, it is working on my swagger or with postman.)
I'm on Angular 2.4.9
Edit
So I tried to copy/past the code of my request on a brand new project, everything is working fine. The request is triggered and I can get the JSON response correctly. So there is something maybe on the configuration of my project that is forbiding the request to trigger correctly.
Ok just found what was going on. I am using a fake backend in order to try my login connexions that is supposed to catch only specified URL. However for wathever raison it was catching all the requests, so that explain everything. Thx for your help everybody.
Try adding a catch block to your service code:
getBlueCollars(): Observable<BlueCollar[]> {
return this.http.get(this.defaultAPIURL + 'bluecollar?limit=25')
.map(
(res: Response) => {
return res.json();
})
.catch(err => Observable.throw(err))
}
Don't forget to
import 'rxjs/add/observable/throw';
import 'rxjs/add/operator/catch';`
I imagine this will result in the error that'll give you an idea where your code is going wrong.
The reason the console.log outside the subscribe call is undefined is because the subscribe/http call is happening asynchronously and so, in effect, the order (in time!) the code is running is:
1) the observable is subscribed to (and then waits for a response)
2) the outer console log runs with blueCollars undefined
3) when the response (or error) comes back from the http request (potentially after several seconds), only then will the inner assignment of this.blueCollar = data happen (and the inner console log), OR an error will get logged
Apart from that the subscribe code looks fine...!

RxJs Observables: run retryWhen after some more async requests

My use case is:
User requests asset from our API which fails because of JWT expiring (passed as an httpOnly cookie) - API returns a 401 status code.
We go and authenticate them (without the user doing anything) again using a refresh_token to retrieve a new JWT with a request from our client to auth0.
We send that new JWT to our API to be set as an httpOnly cookie to replace the expired one.
We then want to retry the original request the user made to the API in step 1.
I'm trying to use Observables within my Redux app with redux-observable. If you can think of another way of making the above user flow work I would be happy to hear how.
NB. Im using rxjs V5
export const fetchAssetListEpic = (action$, store) => {
return action$.ofType('FETCH_ASSET_LIST')
.switchMap( action => {
const options = {
crossDomain: true,
withCredentials: true,
url: uriGenerator('assetList', action.payload)
};
return ajax(options);
})
.map(fetchAssetListSuccess)
.retryWhen(handleError)
.catch(redirectToSignIn);
};
function handleError(err) {
return (err.status === 401) ?
/* Authenticate here [Step 2] */
/* Send new JWT to API [Step 3] */
/* If successful make original request again [Step 4] */
:
Observable.throw(err);
}
function redirectToSignIn() {
/*I will redirect here*/
}
So far I able to complete steps 1, 2 and 3 but not too sure of a way to add step 4. I may be completely off the mark but any help would be great!
Well one thing you probably won't want to do is allow the error to make it to the top level stream. Even if you do a catch you have effectively killed the top level stream. So unless your redirect is doing a hard redirect instead of a a soft one via something like react-router, you won't be able to use this epic any more.
Thus I would say that you want most of the logic to be encapsulated within the switchMap:
function withAuthorizedFlow(source) {
return source
.map(fetchAssetListSuccess)
// retryWhen takes a callback which accepts an Observable of errors
// emitting a next causes a retry, while an error or complete will
// stop retrying
.retryWhen(e => e.flatMap(err =>
Observable.if(
// Returns the first stream if true, second if false
() => err.status === 401,
reauthenticate, // A stream that will emit once authenticated
Observable.throw(err) // Rethrow the error
))
)
.catch(redirectToSignIn);
}
/** Within the epic **/
.switchMap(({payload}) => {
const options = {
crossDomain: true,
withCredentials: true,
url: uriGenerator('assetList', payload)
};
// Invoke the ajax request
return ajax(options)
// Attach a custom pipeline here
// Not strictly necessary but it keeps this method clean looking.
.let(withAuthorizedFlow);
})
The use of let above is completely optional, I threw it in to clean up the function. Essentially though you want to contain the error to the inner stream so that it can't halt the outer one. I am not sure which ajax library you are using but you should also confirm that it will in fact return a cold Observable otherwise you will need to wrap it in a defer block to in order for the retryWhen to work.

Categories

Resources