[Flutter Refresh Token] Dio Interceptor

Muhammad Alfiansyah
2 min readAug 30, 2022

--

Photo by Cedrik Wesche on Unsplash

Konteks artikle kali ini masih sama dengan artikel sebelumnya mengenai retryWhen ketika API executor gagal mendapatkan response karena kena error 401 (UnAuthorize). Untuk implementasi pada RxSwift bisa temen-temen baca pada artikle ini :

Oke …secara singkat dan sederhana ketika kita membuka aplikasi dan token kita expired atau tidak valid maka aplikasi akan memaksa kita untuk mengakhiri sesi dan melempar kita ke page login lagi.

Secara flow tidak ada yang salah dengan urutan itu karena untuk keamanan token akan selalu diberikan limit waktu sehingga aplikasi tetap bisa memastikan user yang sedang login adalah user yang memiliki akun pada aplikasi tersebut demi tujuan keamanan.

Nah tetapi dalam UX (User Experience) ketika user terlalu sering dipaksa untuk melakukan login berulang kali akan menimbulkan experience yang kurang bagus.

Inilah ketika auto refresh token kita perlukan, jadi ketika token expired ketika aplikasi melakukan request sebelum Dio (Framework yang kita gunakan) memberika result error, kita intercept error result untuk melakukan refresh token dan kemudian execute ulang request yang tadinya gagal.

Dari flow interceptor tersebut akan menghasilkan dua kemungkinan refresh token berhasil dan request akan dilakukan ulang atau tetap menghasilkan error karena beberapa hal salah satunya akun hanya bisa login disatu device sehingga token yang kita miliki tidak valid dan didestroy dari backend sehingga kita tidak bisa melakukan refresh token lagi (pada kasus ini app akan tetap force kita untuk melakukan login ulang).

Oke …bagaimana sih implementasi interceptor ini pada Dio di Flutter. Nah disinilah fungsi InterceptorWrapper atau QueuedInterceptorsWrapper.

Oke interceptor done selanjutnya kita tinggal add interceptor ke Dio module nya dan Done.

Interceptor juga bisa kita gunakan untuk membuat log request sehingga ketika kita melakukan request kita bisa keep tracking apa yang dilakukan aplikasi salah satunya duplicate request atau header atau query & body yang kita kirimkan ketika kita melakukan request dan bahkan error atau success response yang kita terima.

Next mungkin kita kan membahas Provider sebagai State Management selain Cubit, Bloc atau RxDart.

--

--

No responses yet