Postingan lainnya
Dispatching event sehabis refreshtoken terjadi di react redux dengan axios interceptor
jadi saya punya action creator kurang lebih seperti ini
export const INSERT_TYPE_TO_PROPS = (data) => {
return {
type : 'INSERT_TYPES',
payload : data
}
}
export const INSERT_TYPE_TO_DATABASE = (type, token) => {
return async (dispatch) => {
await axios({
url : '/api/product/create/type',
method : 'POST',
headers : {
Authorization : `Bearer ${token}`
},
data : type,
})
.then(res => {
console.log(res);
dispatch(INSERT_TYPE_TO_PROPS(res.data.data))
})
.catch(err => {
console.log("error");
console.log(err);
console.log(err.response);
})
}
}
dan ini kongfigurasi axios saya
// Add a request interceptor
Axios.interceptors.request.use(function (config) {
// Do something before request is sent
console.log(config);
return config;
}, function (error) {
// Do something with request error
console.log(error);
console.log("error");
return Promise.reject(error);
});
// Add a response interceptor
Axios.interceptors.response.use(function (response) {
// Do something with response data
console.log('response');
console.log(response);
return response;
}, async function (error) {
console.log("error intercept");
console.log(error.response);
let errorResponse = error.response;
if(errorResponse.status === 401){
if(state.isLogin && state.refreshToken != ""){
return await generateRefreshToken(state, error);
}
}
console.log("sesudah erro intercept");
// Do something with response error
return Promise.reject(error);
});
let subscribers = [];
async function generateRefreshToken(data, err){
const { response: errorResponse } = err;
Axios.post('auth/refresh', {
refreshToken : data.refreshToken
})
.then(async res => {
authStore.dispatch(GENERATE_NEW_TOKEN(res));
state = authStore.getState();
state = state.authReducer;
errorResponse.config.headers.Authorization = `Bearer ${state.token}`;
// return new Promise((resolve, reject) => {
// axios(errorResponse.config)
// .then(res => resolve(res))
// .catch(err => reject(err))
// });
return axios(errorResponse.config);
})
.catch(err => {
return Promise.reject(err)
})
}
nah yang ingin saya tanyakan adalah gimana caranya biar interceptornya jalan semua terlbeih dahulu baru nanti axios di INSERT_TYPE_TO_DATABASE baru di eksekusi. soalnya setiap token saya expired dan mau insert ke database pasti kan request token lagi pake refreshToken. emang token barunya tersimpan lagi dan datanya tersimpan juga ke database. tetapi pada action creator diatas fungsi dispatch(INSERT_TYPE_TO_PROPS(res.data.data)) tidak dipanggil dan langsung throw ke catch. sehingga jadinya error lagi. dan karena error maka data tidak tersimpan di props, jadinya harus direfresh buat liat data yang barusan tersimpan. nah kira kira gimana ya biar dispatchnya masih terpanggil
Tanggapan
x errornya yang keconsole berarti token expire ya? 2. Apakah saat refresh token semuanya sudah berhasil? maksudnya kalau di console.log sudah masuk ke generateRefToken itu dan berhasil?
1 Jawaban:
iya mas token expired.. semua sudah berhasil mas, sudah berhasil didispatch juga token barunya di authStore.dispatch(GENERATE_NEW_TOKEN(res))
tapi sebelum generate refreshToken
Axios.post('auth/refresh', { refreshToken : data.refreshToken })
dia balik dulu ke INSERT_TO_DATABASE kemudain masuk ke block catch .catch(err => { console.log("error"); console.log(err); console.log(err.response); })
setelah itu baru ke sini
authStore.dispatch(GENERATE_NEW_TOKEN(res));
state = authStore.getState();
state = state.authReducer;
errorResponse.config.headers.Authorization = Bearer ${state.token}
;
// return new Promise((resolve, reject) => {
// axios(errorResponse.config)
// .then(res => resolve(res))
// .catch(err => reject(err))
// });
return axios(errorResponse.config);
dan datanya masuk ke database
return async (dispatch) => {
await axios({
url : '/api/product/create/type',
method : 'POST',
headers : {
Authorization : Bearer ${token}
},
data : type,
})
.then(res => {
console.log(res);
dispatch(INSERT_TYPE_TO_PROPS(res.data.data))
})
.catch(err => {
console.log("error");
console.log(err);
console.log(err.response);
})
}
jadi dia gk masuk ke block then, malah ke catch akhirnya gk bisa didispatch