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

avatar nurcahyaari
@nurcahyaari

34 Kontribusi 12 Poin

Dipost 4 tahun yang lalu

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

avatar nurcahyaari
@nurcahyaari

34 Kontribusi 12 Poin

Dipost 4 tahun yang lalu

Login untuk ikut Jawaban