Jadi kami mencapai
banyak hal, kami dapat menulis data, mengambil
data, menggunakan token kami untuk data lingkup atau untuk
lingkup produk dan pesanan ke pengguna kami saat ini
login, kami dapat login dan
seterusnya dan itu semua bagus.
Satu hal yang tidak kami lakukan saat ini adalah kami tidak ingin
melanjutkan sesi kami. Jika saya memuat ulang, saya selalu
harus masuk lagi
dan itu bukan yang saya inginkan, alangkah baiknya jika kita bisa masuk secara otomatis jika kita memiliki token
yang valid dan untuk ini kita perlu melakukan dua hal - kita perlu menyimpan token di suatu tempat di perangkat, bukan di
Redux karena Redux ada dalam memori dan ini akan hilang setiap kali aplikasi restart.
Jadi itu perlu di suatu tempat di hard
drive perangkat sehingga untuk mengatakan dan di samping itu, kita perlu memeriksa penyimpanan itu setiap kali aplikasi kita mulai dan secara otomatis mengatur
token di Redux dan mengarahkan pengguna jika kita menemukan token yang valid di sana.
Sekarang mari kita mulai dengan menyimpan karena itu adalah langkah pertama yang logis. Untuk menyimpan, kita perlu mengimpor
sesuatu di sini di, bukan di pembuat tindakan
produk tetapi sebenarnya di sini di pembuat tindakan auth, di sana Anda perlu mengimpor penyimpanan async dari React Native.
Dengan yang
diimpor, kita dapat menggunakannya untuk menyimpan data ke perangkat, penyimpanan async adalah React Native API yang pada akhirnya menggunakan penyimpanan nilai kunci
pada perangkat yang tersedia baik di iOS dan Android di mana kita dapat menyimpan data yang
tetap ada di seluruh peluncuran ulang aplikasi, sehingga dapat kita gunakan untuk menyimpan data yang tidak hilang
saat aplikasi diluncurkan atau dimulai ulang.
Jadi saya akan menambahkan fungsi baru, menyimpan data ke penyimpanan atau semacamnya dan di
sana saya berharap mendapatkan token dan userId saya, dua potong data yang saya tertarik di sini dan sekarang kita
dapat menggunakan penyimpanan async untuk kemudian atur item yang merupakan cara Anda menyimpan data dan item yang Anda atur harus berupa string tetapi pertama-tama
Anda perlu mendefinisikan kunci dan saya
akan menamainya data pengguna tetapi terserah Anda, Anda akan
membutuhkan kunci itu nanti untuk mengambil data Anda dan nilai kedua
sekarang adalah string, jadi
string yang ingin Anda simpan di sana dan Anda harus menyimpan string pada dasarnya.
Nah,
itu tidak masalah, kita bisa menggunakan json. stringify untuk mengkonversi objek Javascript ke string dan objek yang ingin
saya konversi adalah objek yang memegang token saya yang saya dapatkan sebagai argumen di sini dan itu memegang userId yang
saya dapatkan sebagai argumen.
Jadi pada akhirnya, kami kemudian menyimpan objek ini sebagai string ke perangkat.
Sekarang kita hanya perlu memanggil save data to storage setiap kali kita selesai login atau mendaftar, jadi di sini mungkin setelah
mengirimkan login, kita dapat memanggil save data to storage dan meneruskan resData. idToken
dan resData. localId, jadi hal yang sama kita gunakan di Redux
dan kita pasti ingin menggunakannya di sana karena Redux penting
untuk aplikasi yang sedang berjalan tetapi saya juga menyimpannya ke perangkat ketika kita ingin memuatnya ketika aplikasi restart.
Namun sekarang itu saja tidak akan melakukan trik dan kita tentu juga perlu melakukannya ketika
mendaftar tetapi itu saja tidak akan melakukan trik, kita akan memerlukan satu informasi tambahan di sini sebelum kita melanjutkan.
Apakah kamu tahu yang mana? Kita perlu tahu berapa lama token itu valid karena Anda tidak
boleh lupa bahwa token itu akhirnya akan berakhir, itulah sebabnya untuk masuk dan mendaftar, Anda mendapatkan bahwa kadaluwarsa itu dalam
respons yang memberi tahu Anda dalam hitungan detik berapa lama waktu yang diperlukan hingga token Anda tidak valid dan Firebase tidak akan
menerimanya lagi.
Kita perlu menyimpan informasi itu juga karena jika kita kembali nanti, jika kita me-restart aplikasi setelah
tiga jam, token kita mungkin tidak valid, jadi kita perlu
tahu kapan token akan batal sehingga kita
ketika kita memeriksa itu, ketika aplikasi restart, ketika kita memeriksa apakah kita memiliki token, kita
tahu apakah token yang kita temukan sebenarnya masih relevan atau apakah itu sudah tidak valid dan kita perlu token
baru dalam hal ini kita tidak boleh login otomatis pengguna.
Jadi saya ingin menyimpan tanggal kedaluwarsa
dan saya akan membuat tanggal kedaluwarsa di sini sebagai konstanta, objek tanggal baru yang pada akhirnya harus
mengambil tanggal saat ini dan menambahkan waktu kedaluwarsa.
Sekarang tanggal baru mengambil objek tanggal tetapi dengan mendapatkan waktu, kita mendapatkan cap waktu saat ini dalam milidetik sejak awal
waktu sehingga bisa dikatakan, yang ada di sini tahun
1970 di Javascript.
Jadi itu jumlah dalam milidetik dan untuk itu, kita bisa menambahkan resData. kadaluarsa dalam.
Ini adalah jumlah detik, jadi kita perlu mengonversinya
menjadi milidetik dan itu juga sebuah string, jadi kita perlu mengonversinya menjadi angka.
Jadi di sini saya akan menambahkan nilai tambah di sini atau cukup parseInt sebagai alternatif untuk mengubah ini menjadi bilangan bulat dan kemudian saya
kalikan ini dengan 1000 untuk mengubahnya dari detik ke milidetik karena mendapatkan waktu juga memberi kita milidetik.
Sekarang ini memberi saya cap waktu baru di masa depan yang merupakan waktu saat
ini ditambah waktu kedaluwarsa dan saya membungkusnya dengan objek tanggal lain untuk mengubahnya kembali dari
angka milidetik besar menjadi objek tanggal cap waktu konkret. Tanggal kedaluwarsa ini sekarang adalah apa yang juga harus kami lewati untuk menyimpan
data ke penyimpanan, jadi di sini saya berharap untuk mendapatkan tanggal kedaluwarsa juga
dan kami harus menyertakannya di sini.
Jadi di sini saya dapat menyebutkan tanggal kedaluwarsa ini mungkin
untuk mencampuradukkan, ini adalah tanggal kedaluwarsa saya dan di sana saya ingin memanggil metode toISOString kecil yang menyenangkan ini yang dapat kita
panggil pada objek tanggal karena ini akan mengubahnya menjadi string dalam format
standar yang Saya ingin menyimpan.
Sekarang ini yang ingin saya lakukan untuk mendaftar juga, jadi ini
bisa disalin di sana dan ini
juga yang ingin
saya lakukan di sana, buat tanggal kedaluwarsa dan simpan ke penyimpanan.
Sekarang kami menyimpannya ke penyimpanan yang bagus tapi sekarang
kami juga perlu memeriksa ini saat kami masuk. Cara yang baik untuk melakukannya adalah dengan membuat layar baru
dan saya akan benar-benar membuat ini di luar folder saya yang ada di folder layar tetapi tidak di
toko atau di pengguna dan saya akan memberi nama layar startup ini dan Anda dapat menamainya layar Anda dan Anda dapat menamainya ingin.
Idenya adalah bahwa saya menunjukkan layar ini ketika aplikasi saya boot dan saya mencari tahu apakah pengguna diautentikasi atau tidak
dan ini akan
sangat cepat, kemungkinan kita
bahkan tidak akan melihat layar itu ketika aplikasi dimulai. Sekarang di sini, kita membuat
komponen Bereaksi reguler dengan mengimpor reaksi dari reaksi dan di
sana, saya mengimpor barang-barang dari React Native, tepatnya saya memerlukan
tampilan, indikator aktivitas untuk menampilkan pemintal pemuatan saat aplikasi booting dan juga stylesheet dan juga
penyimpanan async karena di sini saya juga ingin mengakses penyimpanan async untuk mengetahui apakah
kami memiliki token yang valid atau tidak.
Jadi di sini, saya kemudian memiliki komponen layar startup saya yang merupakan komponen Bereaksi reguler
dan objek stylesheet di sini dengan Stylesheet. buat dan pada akhirnya, kita bisa mengekspor layar startup ini seperti ini. Sekarang di komponen, saya hanya akan
menyajikan indikator aktivitas di sini dengan ukuran besar dan warna Warna. utama dan untuk itu Anda perlu mengimpor warna yang
konstan, tentu saja dan juga menetapkan sedikit gaya di sini untuk tampilan dan
saya hanya akan mengambil gaya. layar di sini yang sekarang kita dapat menambahkan
ke stylesheet dan itu harus
sangat sederhana, fleksibel, membenarkan pusat konten dan menyelaraskan pusat item untuk beberapa konten
yang berpusat secara vertikal dan horizontal. Sekarang tentu saja hal-hal penting yang sebenarnya terjadi di
atas kode jsx, di sinilah kita sekarang perlu memeriksa penyimpanan
async untuk token yang valid dan saya bisa melakukan ini dengan bantuan efek penggunaan yang memungkinkan saya menjalankan
beberapa logika di sini ketika komponen
ini terpasang dan memang di sini, saya tidak akan memerlukan dependensi karena di sini di dalam efek penggunaan, saya sekarang ingin menambahkan fungsi baru yang saya
akan beri nama coba daftar atau coba masuk lebih pas dan saya menggunakan fungsi terpisah karena di sini saya ingin
menggunakan async tunggu yang bisa saya lakukan dengan membuat fungsi dalam yang sekarang saya bisa panggil di sini,
coba masuk
karena lagi, async di sini di fungsi ini yang Anda lewati untuk menggunakan efek tidak akan
benar-benar diizinkan dan di sini di coba masuk, tujuannya
sekarang adalah untuk memeriksa penyimpanan async untuk token yang valid. Jadi saya mendapatkan data pengguna saya di sini dengan mengakses
AsyncStorage. getItem
dan kemudian gunakan kunci yang Anda gunakan untuk menyimpan.
Jadi dalam kasus saya itu adalah data pengguna tetapi Anda harus menggunakan kunci apa pun yang Anda gunakan dalam auth. File js di folder tindakan
untuk menyimpan data Anda dengan penyimpanan async. Jadi saya mengambil ini dan sekarang hal penting yang
perlu diketahui di sini adalah mendapatkan item, seperti semua metode penyimpanan async, sebenarnya adalah asinkron yang artinya seperti
namanya, saya kira, yang berarti Anda mendapat janji di sini, jadi kita bisa menunggu
dan ini akan mengembalikan data pengguna kami.
Sekarang ini adalah data sebagai string, untuk mengubahnya menjadi sepotong data yang dapat
kita kerjakan, saya akan mengubah data saya dengan JSON. parsing data pengguna dan ini mem-parsing string dalam
format JSON dan mengubahnya menjadi objek atau array Javascript. Sekarang bahkan sebelum mencobanya, saya akan memeriksa apakah data pengguna tidak benar, jadi
jika
tidak disetel, jika kami tidak dapat menemukan data untuk kunci itu karena saya tahu kami pasti
tidak masuk.
Jadi di sini saya ingin kembali dan tidak melanjutkan dan melakukan
satu hal penting, saya akan menggunakan navigasi alat peraga dan menavigasi ke layar auth karena layar startup ini harus
ditambahkan ke
navigator, jadi di sini kita dapat mengimpornya, mengimpor layar startup dari folder layar tentu saja, layar startup dan kami
menambahkannya ke utama di navigator di sini, jadi
di mana kami juga memiliki auth dan toko dan ada di bagian paling atas, saya menambahkan startup dan arahkan ke layar startup saya.
Ini berarti bahwa ini adalah hal pertama yang saya muat di sini.
Sekarang di layar startup ini, oleh karena itu saya pergi ke layar auth jika kita tidak dapat
menemukan token, jadi berkat navigator sakelar, saya meninggalkan layar itu dan pergi ke layar auth atau
ke tumpukan auth karena saya tidak menemukan sebuah token. Jadi jika kita berhasil melewati ini jika memeriksa, kita setidaknya memiliki beberapa data tetapi token
masih mungkin tidak valid.
Jadi kita tentu saja akan memiliki token, userId dan tanggal kedaluwarsa yang dapat kita ekstrak dari data yang diubah setelah baris
ini, di sini dengan
sintaksis penghancuran objek ini dan ini adalah
tiga potong data dengan tiga nama yang persis sama seperti yang saya simpan di sini di
auth. file js. Jadi
di sini kita memiliki objek dengan token, userId dan
bidang tanggal kedaluwarsa, itulah yang
kami simpan di penyimpanan async, itulah yang dapat saya ambil di sini.
Sekarang kita perlu memeriksa apakah token masih valid
dan untuk ini, saya dapat membuat ulang tanggal kedaluwarsa saya dengan menggunakan tanggal baru dan melewati tanggal kedaluwarsa yang sebenarnya merupakan string dalam format ISO untuk
itu dan sekarang kita dapat menambahkan
tanda centang dan melihat apakah tanggal kedaluwarsa, jadi tanggal saat token
menjadi tidak valid, jika token lebih kecil atau sama dengan tanggal baru, yang merupakan cap waktu saat ini yang
berarti tanggal kedaluwarsa di masa lalu dan jika itu di masa lalu, maka token kami tidak valid.
Itu juga tidak valid jika kita tidak dapat menemukan token atau juga jika kita
tidak dapat menemukan userId, jika salah satu dari ketiga kondisi ini benar, kita memiliki token yang tidak valid
atau userId yang tidak valid atau semacamnya.
Jadi dalam hal ini, saya juga ingin kembali dan
tentu saja menavigasi ke layar auth. Jika kami berhasil melewati ini jika centang,
kami memiliki token, kami memiliki userId dan token masih valid.
Jadi jika Anda membuatnya di sini, saya akan memanggil alat peraga. navigasi. menavigasi toko untuk pergi ke layar toko
dan juga penting, saya perlu login pengguna dan untuk itu, kita
perlu tindakan baru karena saya tidak ingin mengirim permintaan sekarang,
saya hanya ingin mengubah beberapa data di Redux. Jadi saya akan menambahkan pembuat tindakan
baru di sini, ekspor autentikasi const yang mungkin mengambil userId dan token saya dan yang kemudian digunakan untuk mengubah data saya di Redux dan untuk itu, saya sekarang akan
menambahkan
pengidentifikasi tindakan baru, otentikasi dengan string dari otentikasi di sini dan gunakan ini di sini sebagai jenis otentikasi, lampirkan userId saya
yang merupakan userId saya di sini dan token saya yang merupakan token yang saya dapatkan sebagai
argumen dan sekarang tindakan otentikasi ini adalah apa yang ingin saya kirimkan di sini
di layar startup.
Tetapi sebelum saya melakukannya, kita juga dapat kembali ke pembuat tindakan dan pada akhir
mendaftar, alih-alih mengirimkan tindakan pendaftaran kebiasaan saya sendiri di sini, kami juga dapat mengirim otentikasi dan menjalankan
ini
di sini, pembuat tindakan ini dan cukup meneruskan resData. localId sebagai userId dan resData. idToken sebagai token
dan lakukan hal yang sama di akhir login.
Jadi sekarang saya memang menggabungkan kedua aliran ini karena pada akhirnya hal yang sama terjadi,
jadi sekarang di peredam, dalam peredam auth, tentu saja alih-alih memeriksa login dan mendaftar, kita dapat
mengimpor autentikasi dan menggunakan pengenal ini di sini, singkirkan pendaftaran dan saya hanya akan berkomentar untuk tetap tinggal di
sini untuk referensi karena hal yang sama terjadi.
Jadi sekarang menggabungkannya masuk akal karena kita juga membutuhkannya untuk login otomatis ini.
Jadi di sini saya kemudian juga mengirimkannya di sini untuk login manual dan mendaftar manual
dan tentu saja sekarang dengan itu, jika Anda mau, Anda juga dapat menyingkirkan login dan mendaftar di sini,
dari dua pengidentifikasi ini karena kami tidak gunakan lagi.
Tetapi dengan itu, kembali ke layar mulai, di sini
kita sekarang juga dapat mengirimkan ini dan untuk itu Anda hanya perlu mengimpor menggunakan pengiriman dari React Redux dan mengimpor tindakan, jadi impor semuanya sebagai tindakan
auth mungkin dari folder toko, dari folder tindakan dan dari file auth di sana dan kemudian di sini di
awal, dapatkan akses
ke fungsi pengiriman dengan memanggil use dispatch dan dengan itu tersedia, di sini kita dapat menambahkan
pengiriman sebagai ketergantungan tetapi ini tidak akan pernah berubah, sehingga efeknya tidak akan pernah
dijalankan lagi dan di sini setelah menavigasi ke toko, saya sekarang juga ingin mengirim tindakan autentikasi
dan meneruskan userId yang diekstraksi, jadi bidang ini di sini dan token yang diekstraksi, jadi bidang ini yang saya dapatkan dari penyimpanan async
saya dan yang sekarang seharusnya secara otomatis memasukkan saya ke . Itu banyak pekerjaan, mari kita lihat
apakah itu berhasil. Jika saya memuat ulang ini, saya berakhir di sini di layar masuk
karena saat ini saya tidak memiliki token yang valid disimpan di penyimpanan async.
Jadi sekarang jika saya mencoba masuk ke sini, saya diteruskan, jika saya sekarang memuat ulang, saya kembali lagi ke sini dan
itu hebat karena sekarang ini berarti ini sepertinya berfungsi dan token itu disimpan.
Sekarang tentu saja akan lebih baik jika kita juga bisa keluar karena saat ini, tidak ada cara
untuk melakukan itu.