Jadi untuk memastikan bahwa kami keluar saat token kedaluwarsa, saya akan menambahkan fungsi baru dalam
tindakan auth
kami, jadi di folder tindakan di auth. File js, saya akan menambahkan fungsi baru di sini
di mana saya ingin mengatur penghitung waktu yang pada dasarnya kedaluwarsa ketika token kedaluwarsa. Jadi kita dapat memanggil set logout timer ini sebagai contoh
dan
di sana, saya berharap untuk mendapatkan waktu kedaluwarsa dan di sini, kita dapat menggunakan set timeout lama yang baik yang Bereaksi asli mendukung dalam
versi Javascript untuk mengatur timer yang kedaluwarsa setelah waktu ini dan katakanlah ini adalah nilai dalam milidetik, jadi
itu hanya asumsi yang saya miliki dan kami harus memastikan bahwa kami
meneruskan data dalam milidetik karenanya. Setelah fungsi ini di
sini akan mengeksekusi setelah token berakhir dan di sana, pertanyaannya adalah sekarang apa yang kita lakukan di sana?
Pada akhirnya, saya ingin mengirim logout
di sini, kan?
Jadi karena itu set timer logout mungkin seharusnya bukan fungsi normal tetapi sebenarnya di sini, saya
akan memiliki fungsi yang mengambil keuntungan dari Redux Thunk, jadi di
mana kita memiliki fungsi ini dalam fungsi di mana fungsi dalam ini dikirim sebagai argumen
dan karenanya setelah ini tugas async
selesai, setelah penghitung waktu ini kedaluwarsa, kami dapat mengirimkan logout, sehingga kami dapat mengirim hasil dari pembuat tindakan ini
yang merupakan tindakan ini
pada akhirnya, sehingga terjadi ketika penghitung waktu selesai.
Sekarang ketika kita melakukan logout, saya juga ingin menghapus timer yang berjalan karena mungkin kita memiliki
timer yang diatur secara otomatis di sini yang belum kita atur tetapi kita akan segera melakukannya, maka saya ingin menghapus timer
itu ketika kita secara manual keluar sehingga Saya tidak memiliki
pengatur waktu yang sedang berjalan meskipun itu mubazir. Jadi kita dapat menambahkan variabel baru mungkin di
bagian atas file di sini yang saya akan beri nama timer yang tidak diinisialisasi awalnya dan kemudian
di sini ketika kita mengatur timer, saya akan mengatur hasil dari timeout ke timer atau
menyimpan hasil itu dalam timer yang merupakan pointer pada timer
ini dan menambahkan fungsi baru, mungkin di sini, hapus timer logout yang sekarang menjadi fungsi normal, bukan fungsi yang mendapatkan fungsi internal pengiriman
ini tetapi fungsi normal di mana saya hanya memanggil timer timeout yang jelas dan Timer adalah variabel yang menunjuk
pada timer.
Saya hanya ingin memeriksa apakah timer ada, jika tidak terdefinisi dan jika tidak
terdefinisi, saya akan menyebutnya, clear timeout adalah fungsi bawaan Javascript untuk menghilangkan timer itu.
Jadi dengan itu,
kita dapat menghapus timer jika kita tidak membutuhkannya lagi dan saya ingin menyingkirkannya
setiap kali kita logout, jadi setiap kali ini terjadi di sini, saya akan memanggil timer logout yang jelas dan satu hal lain yang perlu saya lakukan
ketika Saya logout adalah saya harus menghapus penyimpanan async saya tentu saja.
Jadi di sini, saya dapat memanggil penyimpanan async menghapus data pengguna item, lagi menggunakan pengenal yang sama yang saya gunakan untuk menyimpan
data.
Jadi saya menggunakan data pengguna di
sana, saya perlu menggunakan pengenal yang sama untuk membersihkannya. Sekarang hapus item mengembalikan janji dan kita
bisa
menunggu untuk ini, dalam hal ini kita perlu mengembalikan sintaksis dalam di mana kita mendapatkan pengiriman dan
kita melakukan tugas async kita, jadi kita pindahkan kode ini ke sini dan kemudian di sini kita
dapat mengirimkan ini tindakan.
Kita bisa melakukan semua itu jika kita tertarik pada
hasil penghapusan item tetapi di sini saya tidak tertarik, saya hanya akan memecat ini dan saya
tidak menunggu janji ini selesai, sebagai gantinya saya segera mengembalikan objek tindakan baru ini dan saya percaya ini akan selesai.
Sekarang tentu saja Anda dapat merestrukturisasi ini tetapi itulah cara
saya akan melakukannya, ini akan menghapus data dari penyimpanan lokal kami. Jadi dengan itu, logout melakukan ini, kami memiliki
fungsi timer logout yang mengatur timer yang melakukan logout setelah ini berakhir, sekarang kami hanya perlu memastikan bahwa
kami mengirimkan pembuat tindakan pencatat waktu logout set ini di sini, bahwa kami menggunakan
pembuat tindakan ini dan Saya ingin menggunakan ini ketika kami mengautentikasi. Jadi kita punya tindakan
otentikasi ini di sana-sini pada akhirnya, saya perlu mengirim set
timer logout serta ini di sini. Jadi di sana, saya sekarang akan benar-benar menggunakan sintaks
yang berbeda ini di mana kita mendapatkan fungsi dalam ini yang menerima pengiriman, sehingga di sini saya
dapat mengirim set timer logout sehingga ini di sini dipicu dan tentu saja
ini juga berarti bahwa di sini alih-alih mengembalikan ini, kami juga perlu mengirim ini, jadi
kami mengirim dua tindakan di sini yang benar-benar baik-baik saja. Jadi saya mengatur timer saya dan saya kemudian
mengirimkan tindakan otentikasi.
Sekarang tentu saja, penghitung waktu logout perlu tahu berapa lama waktu yang diperlukan, waktu kedaluwarsa diperlukan
dan saya berharap untuk mendapatkan ini, waktu kedaluwarsa ini hanya untuk mencampur nama, sebagai argumen di sini dalam otentikasi sehingga saya
dapat meneruskan ini di sini ke timer logout saya.
Itu berarti bahwa setiap tempat di mana kami mengirimkan tindakan autentikasi atau tempat kami menggunakan pembuat tindakan ini, saya harus
mengatakan, ini setiap tempat di mana kami melakukan ini tidak hanya perlu memberikan userId dan token tetapi
juga waktu kedaluwarsa dan yang dimulai
di sini dengan Daftar. Ketika kami mendaftar,
kami memiliki tanggal kedaluwarsa di sini dan kami mengirimkan autentikasi. Sekarang otentikasi juga memerlukan waktu
kedaluwarsa.
Sekarang hal yang baik adalah di sini sangat mudah untuk mengetahui kapan ini
kedaluwarsa karena kita memilikinya di data respons, di sana kita memiliki ini kedaluwarsa di bidang yang tentu
saja sebuah string, jadi dengan parseInt, kita dapat mengonversinya menjadi angka dan kemudian ini akan dalam hitungan detik, otentikasi dan set nilai penghitung waktu logout
dalam milidetik, jadi saya akan mengalikannya dengan 1000
dan saya juga akan menambahkan ini dalam login tentu saja. Di sana, saya juga akan menambahkan itu
sebagai argumen ketiga di sini sehingga untuk masuk
saat kami mengirim tindakan autentikasi ini, kami juga meneruskan waktu kedaluwarsa kami yang kami
dapatkan kembali dari Firebase. Sekarang kita juga memiliki satu tempat lain di mana
kita perlu melakukan itu dan itu adalah
layar pembuka karena di sana kita juga mengirim otentikasi dan di sini kita perlu menghitung waktu yang tersisa karena ini akan muncul kapan pun
kita memulai ulang aplikasi,
jadi di sini kita tidak tahu berapa lama waktu yang dibutuhkan token
untuk kedaluwarsa dan kami perlu menghitungnya.
Jadi di sini saya dapat menghitung waktu kedaluwarsa pada dasarnya mengambil tanggal kedaluwarsa yang merupakan objek tanggal dan panggilan get
time di atasnya yang memberi saya timestamp dalam milidetik sejak awal waktu dan
dari itu
saya harus mengurangi timestamp saat ini mendapatkan waktu, jadi cap waktu
saat ini dalam milidetik. Ini akan menjadi di masa
depan, ini
sekarang jadi perbedaannya harus menjadi angka positif karena saya memeriksa bahwa ini di masa depan
di sini, jadi ini harus menjadi angka positif dalam milidetik.
Jadi sekarang waktu kedaluwarsa di sini dapat diteruskan untuk mengotentikasi dan dengan itu, kita harus memiliki logout otomatis
juga.
Sekarang untuk memvalidasi
bahwa ini berfungsi, mari kita pergi ke auth. File js dan benar-benar ada, dalam fungsi set timer logout,
untuk sementara saya akan membagi waktu kedaluwarsa dengan 1000, yang berarti saya akan membagi milidetik dengan 1000 yang mengubahnya
menjadi detik dan itu
berarti kita harus segera logout sekarang.
Jika saya memuat ulang, saya keluar tetapi Anda akan segera melihat bahwa secara teori hanya ada yang berfungsi. Jika saya login lagi, saya login
dan sekarang karena saya membagi nilainya dengan 1000, saya
harus logout setelah 3. 6 detik tapi aku tidak. Saya dapat menavigasi, tetapi jika
saya memuat ulang, sekarang memang saya sudah keluar. Jadi itu semacam membersihkan data tetapi itu tidak menavigasi kita kembali ke layar
auth dan
alasan untuk itu adalah bahwa kita tidak pernah menginstruksikan React Native untuk menavigasi kita kembali ke layar auth,
jadi itu bagian yang hilang.
Mengosongkan toko Redux kami bagus tetapi sebagai reaksi atas izin itu, kami harus
memastikan kami dibawa kembali ke layar auth. Untuk memastikan hal ini terjadi, kita perlu satu tempat yang selalu dirender
yang membungkus seluruh aplikasi kita di mana kita dapat mendengarkan toko Redux dan mencari tahu kapan token kita disetel ulang ke nol sehingga jika itu
terjadi, kita dapat menavigasi kembali ke layar auth. Sekarang akan menjadi aplikasi. File js karena itu membungkus segalanya
tetapi masalahnya ada
di sana saya mengatur Redux di sini. Jadi Redux di toko saya hanya tersedia di
dalam sini, jadi dalam komponen anak bersarang dan itu sudah komponen navigator saya yang saya tidak punya
akses langsung.
Solusinya adalah hanya membungkus ini dengan komponen lain. Saya akan membuatnya di folder
navigasi karena saya akan menamainya wadah navigasi.
Sekarang ini adalah komponen Bereaksi normal, seperti ini di mana saya
tidak memerlukan apa pun dari Bereaksi Asli tetapi di mana saya baru saja mengatur komponen wadah navigasi saya di mana saya
menerima alat peraga dan mengembalikan beberapa jsx pada akhirnya dan mengekspor ini sebagai wadah navigasi default.
Sekarang di sana saya ingin mengatur navigasi saya, jadi saya akan mengimpor navigator toko dari navigator toko yang ada di folder
yang sama dan itulah yang akan saya kembalikan ke
sini, navigator toko saya seperti ini. Sekarang saya dapat menggunakan wadah navigasi saya di sini di app. File js, jadi alih-alih mengimpor
navigator toko di sini, saya mengimpor wadah navigasi saya dari folder navigasi dan dari file wadah
navigasi dan menggunakan wadah navigasi di sini alih-alih navigator toko.
Sekarang ini hanyalah pembungkus di sekitar navigator toko tetapi karena itu di dalam penyedia, saya sekarang memiliki
akses ke Redux di sana.
Jadi di sini, kita dapat mengimpor pemilih penggunaan dari React Redux dan menggunakannya di sini untuk memanfaatkan Redux.
Jadi di sini di wadah navigasi, saya hanya bisa mendapatkan akses ke isAuth katakanlah dengan menggunakan selector yang menggunakan fungsi ini yang memberi saya akses ke negara Redux
dan kemudian saya bisa mengakses negara. auth. token untuk mendapatkan akses
ke token dalam slice state auth saya dan menggunakan operator double bang pada dasarnya memaksa ini menjadi benar atau
salah dan jika kita tidak memiliki token, ini akan salah sehingga isAuth akan salah dalam kasus
itu, jika kita memiliki token itu akan benar,
jadi isAuth benar jika kita memiliki token yang masuk akal kurasa. Sekarang kita dapat menggunakan efek di sini untuk bereaksi terhadap
perubahan itu.
Jadi di sini dalam efek penggunaan, array dependensi saya termasuk isAuth, jadi
ketika isAuth berubah, fungsi efek ini harus dijalankan dan oleh karena itu di sini, saya kemudian dapat memeriksa apakah kita tidak diautentikasi karena
itu yang saya pedulikan, jika isAuth
tidak benar , jika itu benar saya tidak peduli tetapi jika itu tidak benar, maka saya ingin menavigasi
ke layar auth dan sekarang kami memiliki masalah lain.
Navigator ada di sini dan hanya dalam komponen yang dirender dengan bantuan navigator, kami memiliki
akses ke alat peraga. navigasi. menavigasi tapi untungnya, Bereaksi navigasi memberi kita jalan keluar. Kita dapat menggunakan
referensi untuk mendapatkan akses ke fungsi navigasi dengan bantuan komponen
ini ketika kita menggunakannya dalam kode JSX kita. Kita dapat membuat ref seperti itu dengan use ref dengan hook penggunaan dan
kami hanya membuat ref nav kami di sini dengan
memanggil use ref seperti ini dan Anda harus mengetahui referensi dalam Bereaksi yang pada dasarnya adalah cara
bagi Anda untuk secara langsung mengakses elemen yang Anda render dalam jsx dan sekarang kita bisa menambahkan properti ref ke navigator toko dan
menetapkan ini ke nav ref atau sebaliknya.
Jadi ini membuat koneksi antara konstanta nav ref dan elemen ini yang pada akhirnya ditampilkan di sini dan
sekarang dengan efek ini di sini, kita dapat memanggil navRef. saat ini, ini adalah bagaimana
referensi
bekerja, mereka memiliki pengiriman properti saat ini Pengiriman adalah metode yang disediakan oleh navigator toko atau oleh wadah aplikasi ini yang
pada akhirnya karena wadah toko tidak lain adalah ShopNavigator. ekspor js yang merupakan komponen wadah
aplikasi dan komponen ini memiliki metode pengiriman yang dapat kita gunakan untuk
mengirimkan tindakan navigasi. Untuk itu, kita
sekarang perlu mengimpor sesuatu dari React navigation dan sesuatu itu adalah objek tindakan navigasi di sini dan kemudian
di sini, kita sebut NavigationActions. navigasi dan sekarang
ini memungkinkan kita untuk menavigasi. Namun tidak dengan auth seperti ini tetapi ini membutuhkan
objek sebagai argumen di mana Anda mengatur nama rute dan ini sekarang bisa menjadi auth.
Jadi ini adalah bagaimana kita sekarang dapat menavigasi dari dalam komponen ini meskipun itu di luar navigator.
Jadi ini masuk ke auth setiap kali status isAuth kami berubah menjadi tidak diautentikasi, ini juga berarti bahwa di navigator toko,
di tombol logout kami, kami tidak perlu menavigasi di sini karena jika kami memicu logout, jika kami mengirim
tindakan ini , kami menghapus token di Redux dan karenanya ini akan secara otomatis
memicu navigasi kami berkat wadah navigasi ini dan oleh
karena itu sekarang jika kami menyimpannya, kami harus menavigasi ke auth ketika token tidak valid.
Jadi sekarang jika saya login lagi, setelah 3. 6 detik, kita harus keluar dan kita harus melihat bahwa
kita sudah
keluar, ya itu terlihat bagus.
Mari kita coba lagi
di
sini, ya, kembali dan mari kita juga mencoba logout manual. Jadi jika saya masuk untuk login, buka ini, klik logout,
ini juga masih berfungsi.
Jadi dengan itu, kita punya fungsi logout otomatis bawaan,
sekarang mari kita kembali ke file tindakan auth dan menghapus divisi dummy ini di sini karena saya hanya
melakukan ini untuk pengujian, tentu saja saya tidak ingin secara manual mempersingkat
waktu kedaluwarsa saya , alih-alih sekarang di sini kami memiliki fungsi yang berfungsi dan memastikan bahwa tidak masalah apakah
kami mendaftar atau kami masuk atau apa pun yang kami lakukan, kami memiliki token yang kami simpan, yang dapat kami
gunakan dan kami Kami memastikan bahwa kami juga keluar secara otomatis jika token kami kedaluwarsa.
Ini adalah aplikasi yang sudah selesai di sini.