1
00:00:02,140 --> 00:00:08,590
Jadi bagaimana kita bisa meninggalkan layar autent ini sekarang jika kita masuk atau jika kita berhasil mendaftar?

2
00:00:09,520 --> 00:00:11,130
Ya itu tidak terlalu sulit.

3
00:00:11,380 --> 00:00:16,690
Jika kita berhasil melewati pengiriman ini di sini tanpa mendarat di blok tangkap, jadi itu

4
00:00:16,720 --> 00:00:18,730
masih di sini di

5
00:00:19,090 --> 00:00:26,560
blok coba, kita bisa memanggil alat peraga. navigasi. bernavigasi seperti yang selalu kami lakukan

6
00:00:26,560 --> 00:00:29,470
dan bernavigasi ke layar berbeda yang kami siapkan

7
00:00:29,470 --> 00:00:37,500
di navigator sakelar kami, jadi dalam hal ini ke layar toko. Jadi mari kita lakukan itu, mari kita pergi ke toko dan di

8
00:00:37,500 --> 00:00:42,950
sana untuk saat ini segera setelah kita berhasil login, yang sekarang akan saya lakukan, ini memuat dan

9
00:00:43,030 --> 00:00:45,300
kita di sini. Sekarang saya akan

10
00:00:45,330 --> 00:00:49,300
mendapatkan peringatan di sini mengenai beberapa pembaruan negara yang tidak dapat dilakukan, yang

11
00:00:49,300 --> 00:00:55,450
set ini memuat keadaan yang sekarang gagal jika kita menavigasi. Solusinya adalah kita seharusnya tidak mencoba memperbarui keadaan di layar

12
00:00:55,450 --> 00:01:01,000
ini jika kita tidak berada di layar lagi, jadi kita cukup memindahkannya ke dalam catch block karena kita hanya perlu

13
00:01:01,000 --> 00:01:05,560
mengatur ulang memuat jika kita memiliki kesalahan karena itulah satu-satunya kasus ketika kita tetap berada di

14
00:01:05,560 --> 00:01:07,600
layar auth, jika tidak, kita tidak

15
00:01:07,600 --> 00:01:12,190
perlu mengubah status pemuatan karena kita meninggalkan layar. Jadi dengan itu, kita akan

16
00:01:12,190 --> 00:01:13,780
menyingkirkan ini juga, jika

17
00:01:13,780 --> 00:01:17,080
sekarang saya coba lagi, ini dia dan sekarang

18
00:01:17,300 --> 00:01:18,170
kita

19
00:01:18,170 --> 00:01:22,730
ada di toko utama kita. Sekarang kita tentu saja masih tidak menggunakan

20
00:01:22,730 --> 00:01:24,620
token, jadi mari kita

21
00:01:24,740 --> 00:01:31,550
pastikan kita melakukannya juga dan untuk itu mari kita pergi ke peredam auth dan menambahkan keadaan awal di sana yang menjelaskan

22
00:01:31,640 --> 00:01:35,850
pada dasarnya dengan negara mana kita ingin memulai dan apa yang umum kita

23
00:01:36,230 --> 00:01:41,960
bentuk negara adalah dan di sana saya ingin menyimpan token yang awalnya adalah nol dan saya ingin

24
00:01:41,960 --> 00:01:45,980
menyimpan userId yang awalnya adalah nol, jadi keadaan awal yang sangat dasar.

25
00:01:45,980 --> 00:01:51,230
Kemudian kita dapat mengekspor fungsi peredam yang mengambil keadaan awal dan yang juga menerima

26
00:01:52,010 --> 00:01:57,430
tindakan tentu saja dan di sini saya ingin mengaktifkan jenis tindakan seperti biasa dan saya

27
00:01:57,430 --> 00:01:59,960
punya dua kasus saya tertarik sekarang.

28
00:01:59,980 --> 00:02:08,190
Salah satunya adalah tindakan masuk, jadi Anda perlu mengimpor pengidentifikasi ini dari folder tindakan dan file auth di

29
00:02:08,190 --> 00:02:12,530
sana dan yang lainnya adalah tindakan mendaftar, jadi Anda

30
00:02:12,580 --> 00:02:14,680
perlu mengimpor pengenal ini

31
00:02:15,820 --> 00:02:25,400
juga, dalam kasus lain, saya hanya ingin kembalikan keadaan saya. Jadi, jika kita masuk, saya ingin mengembalikan negara baru di

32
00:02:25,400 --> 00:02:33,400
mana token harusnya katakanlah tindakan. token dan userId harus berupa tindakan. userId dan itu pembaruan yang sama

33
00:02:33,940 --> 00:02:38,530
yang saya butuhkan untuk mendaftar jadi kita bisa menyalinnya di sana.

34
00:02:39,220 --> 00:02:44,530
Sekarang tentu saja kita perlu memastikan bahwa tindakan kita membawa token dan userId,

35
00:02:44,530 --> 00:02:51,970
jadi pada pembuat tindakan di akhir mendaftar di sini ketika saya mengirim tindakan pendaftaran, kita perlu menambahkan bidang

36
00:02:51,970 --> 00:02:55,300
token dan kita perlu menambahkan userId bidang.

37
00:02:55,470 --> 00:03:03,670
Sekarang token dapat diperoleh dari data respon, ada itu token ID dan yang sama di sini, resData bukan ID token tetapi itu localId

38
00:03:03,670 --> 00:03:09,250
dan Anda melihat bahwa di sini di log, localId, ini di sini adalah userId dan jika

39
00:03:09,280 --> 00:03:16,530
Anda gulir ke atas , ID token, itulah tokennya. Jadi itulah yang saya kirimkan di sini dan

40
00:03:17,070 --> 00:03:21,140
kami hanya dapat menyalinnya dan menggunakan yang sama, hampir

41
00:03:21,150 --> 00:03:28,140
sama untuk masuk, satu-satunya hal yang perlu diubah adalah pengidentifikasi ini dan Anda bahkan dapat menyatukan login

42
00:03:28,140 --> 00:03:34,800
dan mendaftar ke satu pengidentifikasi autentikasi gabungan katakanlah karena dalam peredam, kita melakukan hal yang sama.

43
00:03:34,920 --> 00:03:40,200
Jadi saya hanya perlu membaginya di sini agar menjadi jelas bahwa kita memiliki dua hal yang berbeda pada

44
00:03:40,200 --> 00:03:44,420
akhirnya tetapi pembaruannya sama, jadi kita pasti bisa menggabungkan kedua jenis tindakan ini.

45
00:03:45,250 --> 00:03:48,970
Jadi dengan itu, kita sekarang menyimpan token dan itu bagus tapi

46
00:03:49,330 --> 00:03:51,990
untuk apa kita memerlukan token ini lagi?

47
00:03:52,150 --> 00:03:59,700
Kita memerlukan token yang sekarang kita simpan untuk mengakses API kita dan untuk itu, mari kita pergi ke Firebase dan

48
00:03:59,700 --> 00:04:00,870
ke basis data.

49
00:04:00,870 --> 00:04:05,940
Ingatlah bahwa ketika kita mengatur database ini, saya menyebutkan bahwa Anda harus memulai dalam

50
00:04:05,940 --> 00:04:11,370
mode pengujian ini jika Anda ingat. Apa yang dilakukan adalah mengatur aturan tertentu dan Anda

51
00:04:11,370 --> 00:04:15,810
dapat memeriksanya jika mengeklik tab aturan. Ini mengontrol siapa yang dapat membaca dan menulis

52
00:04:15,810 --> 00:04:20,730
ke basis data Anda dan sekarang ini keduanya disetel ke true yang berarti semua orang dapat membaca semuanya dan semua

53
00:04:20,820 --> 00:04:21,930
orang dapat menulis semuanya.

54
00:04:22,230 --> 00:04:32,630
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

55
00:04:32,630 --> 00:04:39,200
tanda kutip ganda dengan cara di sini tapi ini adalah sintaks Firebase dan Anda dapat mempelajari lebih lanjut

56
00:04:39,200 --> 00:04:44,480
tentang aturan di sini dengan mengeklik pelajari lebih lanjut atau cukup google untuk Firebase

57
00:04:44,480 --> 00:04:46,960
aturan keamanan basis data waktu nyata.

58
00:04:47,000 --> 00:04:53,000
Apa yang dikatakan Firebase adalah bahwa hanya pengguna yang diautentikasi, jadi hanya pengguna yang mengirim

59
00:04:53,000 --> 00:04:57,400
permintaan dengan token yang valid yang dapat membaca dan menulis.

60
00:04:57,560 --> 00:05:00,080
Sekarang Anda bahkan dapat berargumen bahwa Redux harus

61
00:05:00,110 --> 00:05:06,710
selalu diizinkan, kami dapat mengatur ini menjadi benar dan Anda bahkan bisa lebih spesifik mengenai aturan sehingga Anda mengatakan Redux dari

62
00:05:06,710 --> 00:05:07,970
produk diperbolehkan, Redux

63
00:05:07,970 --> 00:05:09,770
dari pesanan tidak tetapi sekali

64
00:05:09,800 --> 00:05:13,200
lagi itu adalah sesuatu yang dapat Anda periksa dengan dokumen resmi.

65
00:05:13,370 --> 00:05:18,950
Saya akan pergi dengan pengaturan di mana Redux selalu diizinkan tetapi penulisan tidak.

66
00:05:19,010 --> 00:05:22,160
Jadi sekarang untuk menulis, kita perlu

67
00:05:22,160 --> 00:05:28,640
token, kalau tidak kita akan menghadapi masalah. Jika kami masuk di sini dan kami menyimpan token tetapi

68
00:05:28,640 --> 00:05:30,440
kami tidak menambahkannya ke

69
00:05:30,650 --> 00:05:33,060
permintaan sekarang, Anda lihat kami dapat memuat

70
00:05:33,320 --> 00:05:38,510
semua data, itu baik-baik saja tetapi Anda juga akan melihat bahwa jika saya mencoba mengedit ini

71
00:05:38,510 --> 00:05:45,420
dan menghapus pasangan tanda seru di sini, pada akhirnya saya mendapatkan kesalahan dan kesalahan itu dilemparkan karena saya tidak diizinkan untuk

72
00:05:45,420 --> 00:05:49,190
menulis dan karena itu Firebase memblokir akses dan mengembalikan respons kesalahan.

73
00:05:49,190 --> 00:05:54,890
Jadi sekarang kita perlu memanfaatkan token yang disimpan dalam reducer dan benar-benar menambahkannya ke

74
00:05:54,890 --> 00:05:56,360
permintaan keluar kita.

75
00:05:56,360 --> 00:06:00,940
Sekarang untuk yang pertama-tama, kita perlu mendaftarkan peredam ini

76
00:06:00,950 --> 00:06:08,300
di peredam root kita, jadi di aplikasi. File js, kita perlu mengimpornya, kita perlu mengimpor peredam auth dari toko dan

77
00:06:08,300 --> 00:06:14,780
ada folder peredam dan di sana, file auth dan menambahkannya ke pereduksi gabungan, mungkin ada di sini dengan kunci auth tapi tentu saja

78
00:06:14,780 --> 00:06:20,030
Anda dapat menggunakan kunci apa pun yang Anda inginkan. Itu akan memungkinkan kita untuk

79
00:06:20,240 --> 00:06:26,360
meningkatkan ini dan mengakses token ini, tetapi sekarang kita harus melampirkannya ke permintaan keluar, misalnya untuk

80
00:06:26,360 --> 00:06:29,450
produk kita perlu melampirkannya ke permintaan yang kami

81
00:06:29,510 --> 00:06:38,090
kirim untuk memperbarui produk, sehingga akan menjadi permintaan ini di sini. Sekarang cara Anda menambahkan permintaan di Firebase dapat ditemukan di

82
00:06:38,090 --> 00:06:44,570
dokumen Firebase resmi untuk otentikasi pengguna basis data waktu nyata di sini, di sana pada

83
00:06:44,570 --> 00:06:52,640
akhirnya apa yang Anda pelajari adalah bahwa Anda dapat menambahkan token ke permintaan keluar Anda hanya dengan menambahkan permintaan auth

84
00:06:52,760 --> 00:06:55,540
parameter di akhir URL permintaan Anda.

85
00:06:55,790 --> 00:06:59,690
Jadi di sini pada akhirnya, kita perlu menambahkan tanda tanya yang sama

86
00:07:00,080 --> 00:07:06,160
dan kemudian di sini, kita perlu memiliki token kita. Sekarang bagaimana kita bisa mendapatkan token di sini?

87
00:07:06,180 --> 00:07:12,790
Kami berada di pembuat tindakan yang artinya kami tidak memiliki akses mudah ke toko di

88
00:07:13,070 --> 00:07:20,390
sini, ke toko Redux atau apakah kita? Redux Thunk, paket bagus yang memungkinkan kita untuk menulis sintaks

89
00:07:20,390 --> 00:07:24,720
ini dengan fungsi yang menerima fungsi pengiriman, yang sebenarnya memberi kita sesuatu yang manis.

90
00:07:24,800 --> 00:07:30,860
Kami juga dapat mengubah fungsi ini sedikit dan tidak hanya mendapatkan pengiriman tetapi mendapatkan argumen kedua juga

91
00:07:30,860 --> 00:07:35,250
yang merupakan fungsi lain yang memberi kami akses ke kondisi Redux, jadi kami

92
00:07:35,510 --> 00:07:43,230
mendapatkan akses ke keadaan saat ini dari toko Redux kami. Jadi jika saya menghibur log hasil get state di sini, mari kita

93
00:07:43,230 --> 00:07:45,300
lihat apa yang memberi kita dan

94
00:07:45,300 --> 00:07:51,860
untuk menghindari kesalahan, untuk saat ini, di sini saya hanya akan menambahkan string kosong sehingga kita dapat menguji kode ini.

95
00:07:51,870 --> 00:07:56,400
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

96
00:07:56,400 --> 00:07:56,700
ini.

97
00:08:00,000 --> 00:08:00,540
Jadi

98
00:08:00,570 --> 00:08:03,660
waktu untuk login lagi sangat cepat dan kemudian pergi

99
00:08:04,550 --> 00:08:09,010
ke layar admin dan coba edit ini yang tentu saja masih akan gagal tetapi

100
00:08:09,970 --> 00:08:13,300
itu tidak masalah karena sekarang jika saya klik di sini, ya

101
00:08:13,420 --> 00:08:19,690
itu gagal tapi yang akan Anda lihat adalah di sini dalam log, apa yang kita dapatkan adalah hasil penuh dari

102
00:08:19,780 --> 00:08:22,270
toko Redux lengkap kami. Ini adalah toko

103
00:08:22,270 --> 00:08:28,570
Redux kami, kami mendapatkan objek dengan slice state auth kami yang memiliki objek lain dengan token kami

104
00:08:28,570 --> 00:08:34,880
dan dengan ID pengguna, slice state kartu kami, slice state pesanan kami dan slice state produk kami.

105
00:08:34,960 --> 00:08:40,540
Jadi ini memungkinkan saya untuk mendapatkan akses ke toko Redux saya dan mendapatkan akses ke token,

106
00:08:40,540 --> 00:08:48,060
sehingga token dapat diambil dengan menjalankan getState. auth. token karena ini memberi kita akses

107
00:08:48,070 --> 00:08:53,890
ke toko Redux penuh kami, ini kemudian memberi kita akses ke slice auth dan ini ke

108
00:08:53,890 --> 00:08:59,810
properti token yang kita kelola dalam slice auth. Dan sekarang di pembuat tindakan

109
00:09:00,090 --> 00:09:09,440
produk, kita dapat menambahkan token ini di sini pada akhirnya. Jadi di sini kita bisa mengganti string ini dengan variabel token

110
00:09:09,440 --> 00:09:11,600
yang menampung token kita

111
00:09:11,600 --> 00:09:17,330
dan sekarang jika kita menyimpan ini, dengan sedikit perubahan ini, jika kita sekarang login

112
00:09:17,390 --> 00:09:20,000
lagi dan kemudian kita juga akan mengubah

113
00:09:20,000 --> 00:09:27,490
ini sehingga kita tidak selalu perlu Relogin, jangan khawatir. Jika kita masuk lagi, kita pergi ke admin, klik tambahkan di sini

114
00:09:27,710 --> 00:09:33,800
dan sekarang kita coba ini, ini berfungsi lagi karena sekarang token ditambahkan, Firebase memvalidasi dan menentukan bahwa itu valid karena

115
00:09:33,830 --> 00:09:35,890
tentu saja kita belum bergaul dengannya

116
00:09:35,900 --> 00:09:39,170
, itu token yang valid dan karena itu ini berfungsi.

117
00:09:39,200 --> 00:09:43,190
Sekarang kita tidak hanya memerlukan token ketika kita memperbarui produk kita, kita

118
00:09:43,190 --> 00:09:48,410
juga membutuhkannya ketika kita menambahkan produk baru. Jadi saya akan menyalin logika itu dan menambahkan

119
00:09:48,410 --> 00:09:54,310
logika yang sama di sini, ketika kita membuat produk, saya mendapatkan token saya dengan bantuan argumen kedua yang

120
00:09:54,310 --> 00:09:56,330
bisa kita dapatkan di sini

121
00:09:56,440 --> 00:10:03,320
jika kita membutuhkannya, fungsi get state dan ini memungkinkan saya untuk ubah tanda kutip tunggal ini untuk kembali kutu sehingga saya

122
00:10:03,320 --> 00:10:09,530
dapat dengan mudah menambahkan parameter kueri di sini di akhir dengan tanda tanya sama dan sama dengan token saya.

123
00:10:09,530 --> 00:10:15,300
Jadi sekarang kita dapat membuat produk dan memperbarui produk, menghapus tentu saja juga merupakan

124
00:10:15,410 --> 00:10:22,430
permintaan tulis, jadi untuk menghapus produk saya akan melakukan hal yang sama, mendapatkan akses ke toko saya dengan fungsi

125
00:10:22,430 --> 00:10:29,130
get state di sini dan kemudian juga menambahkan tanda tanya di sini di akhir dan tambahkan token.

126
00:10:29,300 --> 00:10:30,290
Jadi itu satu hal.

127
00:10:30,320 --> 00:10:36,260
Sekarang dalam pesanan, itu adalah hal yang sama, ada untuk mengambil, kita tidak membutuhkannya tetapi untuk menambahkan kita lakukan

128
00:10:36,290 --> 00:10:38,260
karena menambahkan adalah operasi tulis.

129
00:10:38,480 --> 00:10:45,110
Jadi di sana, kita mendapatkan status jika kita mau, kita dapat mengekstrak token dari sana dengan pendekatan yang sama seperti

130
00:10:45,110 --> 00:10:52,880
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

131
00:10:52,880 --> 00:10:54,860
berikutnya, tetapi untuk saat ini,

132
00:10:54,860 --> 00:10:57,810
pastikan Anda menambahkan token di mana-mana dan sekarang mari

133
00:10:57,890 --> 00:11:02,570
kita lihat bagaimana kami juga dapat memastikan bahwa pesanan sebenarnya benar-benar milik pengguna kami.