Jadi bagaimana kita bisa meninggalkan layar autent ini sekarang jika kita masuk atau jika kita berhasil mendaftar?
Ya itu tidak terlalu sulit.
Jika kita berhasil melewati pengiriman ini di sini tanpa mendarat di blok tangkap, jadi itu
masih di sini di
blok coba, kita bisa memanggil alat peraga. navigasi. bernavigasi seperti yang selalu kami lakukan
dan bernavigasi ke layar berbeda yang kami siapkan
di navigator sakelar kami, jadi dalam hal ini ke layar toko. Jadi mari kita lakukan itu, mari kita pergi ke toko dan di
sana untuk saat ini segera setelah kita berhasil login, yang sekarang akan saya lakukan, ini memuat dan
kita di sini. Sekarang saya akan
mendapatkan peringatan di sini mengenai beberapa pembaruan negara yang tidak dapat dilakukan, yang
set ini memuat keadaan yang sekarang gagal jika kita menavigasi. Solusinya adalah kita seharusnya tidak mencoba memperbarui keadaan di layar
ini jika kita tidak berada di layar lagi, jadi kita cukup memindahkannya ke dalam catch block karena kita hanya perlu
mengatur ulang memuat jika kita memiliki kesalahan karena itulah satu-satunya kasus ketika kita tetap berada di
layar auth, jika tidak, kita tidak
perlu mengubah status pemuatan karena kita meninggalkan layar. Jadi dengan itu, kita akan
menyingkirkan ini juga, jika
sekarang saya coba lagi, ini dia dan sekarang
kita
ada di toko utama kita. Sekarang kita tentu saja masih tidak menggunakan
token, jadi mari kita
pastikan kita melakukannya juga dan untuk itu mari kita pergi ke peredam auth dan menambahkan keadaan awal di sana yang menjelaskan
pada dasarnya dengan negara mana kita ingin memulai dan apa yang umum kita
bentuk negara adalah dan di sana saya ingin menyimpan token yang awalnya adalah nol dan saya ingin
menyimpan userId yang awalnya adalah nol, jadi keadaan awal yang sangat dasar.
Kemudian kita dapat mengekspor fungsi peredam yang mengambil keadaan awal dan yang juga menerima
tindakan tentu saja dan di sini saya ingin mengaktifkan jenis tindakan seperti biasa dan saya
punya dua kasus saya tertarik sekarang.
Salah satunya adalah tindakan masuk, jadi Anda perlu mengimpor pengidentifikasi ini dari folder tindakan dan file auth di
sana dan yang lainnya adalah tindakan mendaftar, jadi Anda
perlu mengimpor pengenal ini
juga, dalam kasus lain, saya hanya ingin kembalikan keadaan saya. Jadi, jika kita masuk, saya ingin mengembalikan negara baru di
mana token harusnya katakanlah tindakan. token dan userId harus berupa tindakan. userId dan itu pembaruan yang sama
yang saya butuhkan untuk mendaftar jadi kita bisa menyalinnya di sana.
Sekarang tentu saja kita perlu memastikan bahwa tindakan kita membawa token dan userId,
jadi pada pembuat tindakan di akhir mendaftar di sini ketika saya mengirim tindakan pendaftaran, kita perlu menambahkan bidang
token dan kita perlu menambahkan userId bidang.
Sekarang token dapat diperoleh dari data respon, ada itu token ID dan yang sama di sini, resData bukan ID token tetapi itu localId
dan Anda melihat bahwa di sini di log, localId, ini di sini adalah userId dan jika
Anda gulir ke atas , ID token, itulah tokennya. Jadi itulah yang saya kirimkan di sini dan
kami hanya dapat menyalinnya dan menggunakan yang sama, hampir
sama untuk masuk, satu-satunya hal yang perlu diubah adalah pengidentifikasi ini dan Anda bahkan dapat menyatukan login
dan mendaftar ke satu pengidentifikasi autentikasi gabungan katakanlah karena dalam peredam, kita melakukan hal yang sama.
Jadi saya hanya perlu membaginya di sini agar menjadi jelas bahwa kita memiliki dua hal yang berbeda pada
akhirnya tetapi pembaruannya sama, jadi kita pasti bisa menggabungkan kedua jenis tindakan ini.
Jadi dengan itu, kita sekarang menyimpan token dan itu bagus tapi
untuk apa kita memerlukan token ini lagi?
Kita memerlukan token yang sekarang kita simpan untuk mengakses API kita dan untuk itu, mari kita pergi ke Firebase dan
ke basis data.
Ingatlah bahwa ketika kita mengatur database ini, saya menyebutkan bahwa Anda harus memulai dalam
mode pengujian ini jika Anda ingat. Apa yang dilakukan adalah mengatur aturan tertentu dan Anda
dapat memeriksanya jika mengeklik tab aturan. Ini mengontrol siapa yang dapat membaca dan menulis
ke basis data Anda dan sekarang ini keduanya disetel ke true yang berarti semua orang dapat membaca semuanya dan semua
orang dapat menulis semuanya.
Itu tentu saja biasanya bukan yang Anda inginkan, sebaliknya di sini saya akan mengatur keduanya untuk auth tidak sama dengan nol yang mungkin terlihat aneh dan ini seharusnya menjadi
tanda kutip ganda dengan cara di sini tapi ini adalah sintaks Firebase dan Anda dapat mempelajari lebih lanjut
tentang aturan di sini dengan mengeklik pelajari lebih lanjut atau cukup google untuk Firebase
aturan keamanan basis data waktu nyata.
Apa yang dikatakan Firebase adalah bahwa hanya pengguna yang diautentikasi, jadi hanya pengguna yang mengirim
permintaan dengan token yang valid yang dapat membaca dan menulis.
Sekarang Anda bahkan dapat berargumen bahwa Redux harus
selalu diizinkan, kami dapat mengatur ini menjadi benar dan Anda bahkan bisa lebih spesifik mengenai aturan sehingga Anda mengatakan Redux dari
produk diperbolehkan, Redux
dari pesanan tidak tetapi sekali
lagi itu adalah sesuatu yang dapat Anda periksa dengan dokumen resmi.
Saya akan pergi dengan pengaturan di mana Redux selalu diizinkan tetapi penulisan tidak.
Jadi sekarang untuk menulis, kita perlu
token, kalau tidak kita akan menghadapi masalah. Jika kami masuk di sini dan kami menyimpan token tetapi
kami tidak menambahkannya ke
permintaan sekarang, Anda lihat kami dapat memuat
semua data, itu baik-baik saja tetapi Anda juga akan melihat bahwa jika saya mencoba mengedit ini
dan menghapus pasangan tanda seru di sini, pada akhirnya saya mendapatkan kesalahan dan kesalahan itu dilemparkan karena saya tidak diizinkan untuk
menulis dan karena itu Firebase memblokir akses dan mengembalikan respons kesalahan.
Jadi sekarang kita perlu memanfaatkan token yang disimpan dalam reducer dan benar-benar menambahkannya ke
permintaan keluar kita.
Sekarang untuk yang pertama-tama, kita perlu mendaftarkan peredam ini
di peredam root kita, jadi di aplikasi. File js, kita perlu mengimpornya, kita perlu mengimpor peredam auth dari toko dan
ada folder peredam dan di sana, file auth dan menambahkannya ke pereduksi gabungan, mungkin ada di sini dengan kunci auth tapi tentu saja
Anda dapat menggunakan kunci apa pun yang Anda inginkan. Itu akan memungkinkan kita untuk
meningkatkan ini dan mengakses token ini, tetapi sekarang kita harus melampirkannya ke permintaan keluar, misalnya untuk
produk kita perlu melampirkannya ke permintaan yang kami
kirim untuk memperbarui produk, sehingga akan menjadi permintaan ini di sini. Sekarang cara Anda menambahkan permintaan di Firebase dapat ditemukan di
dokumen Firebase resmi untuk otentikasi pengguna basis data waktu nyata di sini, di sana pada
akhirnya apa yang Anda pelajari adalah bahwa Anda dapat menambahkan token ke permintaan keluar Anda hanya dengan menambahkan permintaan auth
parameter di akhir URL permintaan Anda.
Jadi di sini pada akhirnya, kita perlu menambahkan tanda tanya yang sama
dan kemudian di sini, kita perlu memiliki token kita. Sekarang bagaimana kita bisa mendapatkan token di sini?
Kami berada di pembuat tindakan yang artinya kami tidak memiliki akses mudah ke toko di
sini, ke toko Redux atau apakah kita? Redux Thunk, paket bagus yang memungkinkan kita untuk menulis sintaks
ini dengan fungsi yang menerima fungsi pengiriman, yang sebenarnya memberi kita sesuatu yang manis.
Kami juga dapat mengubah fungsi ini sedikit dan tidak hanya mendapatkan pengiriman tetapi mendapatkan argumen kedua juga
yang merupakan fungsi lain yang memberi kami akses ke kondisi Redux, jadi kami
mendapatkan akses ke keadaan saat ini dari toko Redux kami. Jadi jika saya menghibur log hasil get state di sini, mari kita
lihat apa yang memberi kita dan
untuk menghindari kesalahan, untuk saat ini, di sini saya hanya akan menambahkan string kosong sehingga kita dapat menguji kode ini.
Tentu saja, ini tidak akan berfungsi tetapi kami akan segera memperbaikinya, jadi mari kita lihat apa yang ada di dalam status itu jika kita menjalankan
ini.
Jadi
waktu untuk login lagi sangat cepat dan kemudian pergi
ke layar admin dan coba edit ini yang tentu saja masih akan gagal tetapi
itu tidak masalah karena sekarang jika saya klik di sini, ya
itu gagal tapi yang akan Anda lihat adalah di sini dalam log, apa yang kita dapatkan adalah hasil penuh dari
toko Redux lengkap kami. Ini adalah toko
Redux kami, kami mendapatkan objek dengan slice state auth kami yang memiliki objek lain dengan token kami
dan dengan ID pengguna, slice state kartu kami, slice state pesanan kami dan slice state produk kami.
Jadi ini memungkinkan saya untuk mendapatkan akses ke toko Redux saya dan mendapatkan akses ke token,
sehingga token dapat diambil dengan menjalankan getState. auth. token karena ini memberi kita akses
ke toko Redux penuh kami, ini kemudian memberi kita akses ke slice auth dan ini ke
properti token yang kita kelola dalam slice auth. Dan sekarang di pembuat tindakan
produk, kita dapat menambahkan token ini di sini pada akhirnya. Jadi di sini kita bisa mengganti string ini dengan variabel token
yang menampung token kita
dan sekarang jika kita menyimpan ini, dengan sedikit perubahan ini, jika kita sekarang login
lagi dan kemudian kita juga akan mengubah
ini sehingga kita tidak selalu perlu Relogin, jangan khawatir. Jika kita masuk lagi, kita pergi ke admin, klik tambahkan di sini
dan sekarang kita coba ini, ini berfungsi lagi karena sekarang token ditambahkan, Firebase memvalidasi dan menentukan bahwa itu valid karena
tentu saja kita belum bergaul dengannya
, itu token yang valid dan karena itu ini berfungsi.
Sekarang kita tidak hanya memerlukan token ketika kita memperbarui produk kita, kita
juga membutuhkannya ketika kita menambahkan produk baru. Jadi saya akan menyalin logika itu dan menambahkan
logika yang sama di sini, ketika kita membuat produk, saya mendapatkan token saya dengan bantuan argumen kedua yang
bisa kita dapatkan di sini
jika kita membutuhkannya, fungsi get state dan ini memungkinkan saya untuk ubah tanda kutip tunggal ini untuk kembali kutu sehingga saya
dapat dengan mudah menambahkan parameter kueri di sini di akhir dengan tanda tanya sama dan sama dengan token saya.
Jadi sekarang kita dapat membuat produk dan memperbarui produk, menghapus tentu saja juga merupakan
permintaan tulis, jadi untuk menghapus produk saya akan melakukan hal yang sama, mendapatkan akses ke toko saya dengan fungsi
get state di sini dan kemudian juga menambahkan tanda tanya di sini di akhir dan tambahkan token.
Jadi itu satu hal.
Sekarang dalam pesanan, itu adalah hal yang sama, ada untuk mengambil, kita tidak membutuhkannya tetapi untuk menambahkan kita lakukan
karena menambahkan adalah operasi tulis.
Jadi di sana, kita mendapatkan status jika kita mau, kita dapat mengekstrak token dari sana dengan pendekatan yang sama seperti
sebelumnya dan kita dapat menambahkan ini di sana-sini, kita sebenarnya juga akan membutuhkan userId segera, jadi kita akan berhati-hati tentang hal ini dalam kuliah
berikutnya, tetapi untuk saat ini,
pastikan Anda menambahkan token di mana-mana dan sekarang mari
kita lihat bagaimana kami juga dapat memastikan bahwa pesanan sebenarnya benar-benar milik pengguna kami.