‫Narator: Selamat datang kembali.
‫Jadi dalam video ini, Anda akan mempelajari cara yang sangat aman
‫untuk keluar dari pengguna.
‫Jadi sampai saat ini, ketika kami ingin menghapus pengguna,
‫kami cukup menghapus cookie dari browser kami.
‫Benar?
‫Jadi sesuatu seperti ini,
‫dan kemudian menghapusnya.
‫Namun, masalahnya adalah kami membuat cookie
‫ini sebagai cookie http saja.
‫Ingat itu, dan
‫itu berarti bahwa kami tidak dapat memanipulasi cookie ini
‫dengan cara apa pun di browser kami.
‫Jadi kita tidak bisa
‫mengubahnya, dan kita juga tidak bisa menghapusnya.
‫Jadi mari kita cepat melihat tempat itu dalam kode di mana
‫kita melakukannya.
‫Jadi di pengontrol
‫auth di sana di mana kami benar-benar membuat cookie
‫itu jadi itu ada di sini.
‫Dan sekali lagi, ingat, ini berarti kita tidak
‫dapat memanipulasi cookie di browser dengan cara apa pun.
‫Bahkan tidak menghancurkannya.
‫Jadi hapus.
‫Jadi jika kita ingin tetap menggunakan cara penyimpanan cookie yang
‫super aman ini, lalu
‫bagaimana kita bisa benar-benar mengeluarkan pengguna di situs
‫web kita?
‫Karena biasanya dengan otentikasi JWT kita hanya
‫menghapus cookie
‫atau token dari penyimpanan lokal.
‫Tapi yah, sekali lagi, itu tidak mungkin saat menggunakannya dengan cara ini.
‫Jadi yang akan kita lakukan adalah membuat
‫rute keluar yang sangat sederhana yang hanya akan mengirim kembali
‫cookie baru dengan nama yang sama
‫persis tetapi tanpa token.
‫Dan itu kemudian akan menimpa cookie saat ini
‫yang kita miliki di browser dengan cookie yang memiliki nama
‫yang sama tetapi tanpa token.
‫Jadi ketika cookie itu kemudian dikirim bersama
‫dengan permintaan berikutnya, maka kami tidak akan dapat
‫mengidentifikasi pengguna yang sedang login.
‫Jadi ini secara efektif akan membuat pengguna logout.
‫Dan juga akan memberikan
‫cookie ini waktu kedaluwarsa yang sangat singkat.
‫Jadi ini secara efektif akan sedikit
‫seperti menghapus
‫cookie tetapi dengan solusi yang sangat cerdas seperti ini, oke?
‫Jadi mari kita lakukan itu di sini, tepat setelah masuk.
‫Jadi sekali lagi ketika kita melakukan otentikasi berbasis token, kita biasanya
‫tidak pernah membutuhkan titik akhir seperti ini,
‫tetapi ketika kita ingin mengirim cookie super aman seperti yang kita lakukan dengan baik, maka
‫kita harus melakukannya seperti ini.
‫Jadi, sekali lagi, pada respons kami menetapkan cookie, dan
‫rahasianya adalah memberinya nama yang sama persis.
‫Jadi seperti yang saya
‫sebutkan sebelumnya, dan itu adalah jwt.
‫Jadi seperti di sini, oke?
‫Tapi di sini, kami kemudian mengirim
‫token, tetapi sekarang kami hanya akan mengirim beberapa teks dummy.
‫Jadi katakanlah logout, lalu
‫opsi cookie.
‫Jadi tanggal kedaluwarsa, seperti dalam
‫10 detik dari sekarang.
‫Jadi mari kita buat tanggal
‫baru
‫berdasarkan tanggal. sekarang
‫ditambah 10 detik.
‫Jadi 10 kali 1000.
‫Dan juga saya akan mengaturnya, sekali lagi, ke http saja.
‫Setel ke true,
‫tetapi kita tidak perlu menyetelnya sebagai aman, karena
‫dalam hal ini tidak ada data sensitif
‫yang dapat diperoleh siapa pun.
‫Di sini kita kehilangan koma,
‫jadi sekarang yang perlu kita lakukan hanyalah mengirim tanggapan ini kembali.
‫Jadi status 200 dan mari kita
‫tandai sebagai sukses di sini.
‫Kemudian di rute kami, kami perlu menambahkannya, tentu saja, juga jadi
‫itu di rute pengguna jadi
‫mari kita lakukan di sini setelah masuk,
‫tetapi yang ini sebenarnya akan menjadi permintaan get karena
‫kami tidak akan mengirim data
‫apa pun seiring
‫dengan permintaan kami tidak
‫mengubah apa pun, kami sebenarnya hanya mendapatkan cookie.
‫Dan nama itu sebenarnya masuk akal.
‫Atau kata kerja itu benar-benar masuk akal.
‫Jadi logout, dan
‫sekarang kita baik untuk benar-benar mencapai rute itu seperti yang kita
‫lakukan di sini dengan perpustakaan Axios kita.
‫Jadi ekspor, log out,
‫atau sebenarnya const
‫dulu dan
‫seperti sebelumnya kita menggunakan
‫blok try catch yang
‫dalam hal ini tidak terlalu penting
‫karena tidak mungkin ada kesalahan saat logout,
‫kan?
‫Tapi bagaimanapun, untuk jaga-jaga, misalnya, kita
‫tidak memiliki koneksi internet.
‫Jadi dalam hal ini, kita akan mendapatkan kesalahan yang bagus dan mari kita
‫lakukan itu terlebih dahulu di sini.
‫Jadi tampilkan kesalahan
‫saat
‫keluar coba lagi.
‫Oke, tapi ini di sini, seperti yang saya
‫katakan, seharusnya tidak sering terjadi.
‫Jadi mari
‫kita
‫lakukan permintaan kita dengan Axios.
‫Baiklah.
‫Jadi metode kali ini adalah get
‫dan URL-nya mirip
‫dengan yang kita miliki
‫di sini, Tapi
‫itu logout.
‫Dan kemudian sebagai langkah selanjutnya, mari kita juga memuat ulang halaman.
‫Jadi itulah yang selalu kami lakukan
‫secara manual ketika kami menghapus cookie, bukan?
‫Jadi di sini tentu saja kita perlu melakukannya secara terprogram.
‫Benar?
‫Dan kami perlu melakukannya
‫di sini karena karena ini adalah permintaan Ajax, kami tidak dapat melakukannya di
‫sisi belakang.
‫Jadi kita tidak bisa melakukannya dengan express.
‫Jadi kita perlu, tentu saja, melakukannya secara manual di sini.
‫Benar?
‫Kalau tidak, kami secara teknis akan keluar tetapi
‫menu pengguna kami masih akan mencerminkan sehingga
‫masih menunjukkan bahwa kami masuk.
‫Dan tentu saja, kita hanya perlu memuat ulang halaman
‫yang pada dasarnya akan mengirim cookie yang tidak
‫valid ke
‫server, sehingga cookie yang baru saja kita terima
‫tanpa token dan kemudian kita tidak
‫lagi login, dan oleh karena itu menu pengguna kita akan menghilang, oke?
‫Jadi mari kita lakukan itu jika ada yang sukses.
‫Jadi seperti sebelumnya, istirahatlah. data. status.
‫Jadi di titik akhir ini, kami juga mengirim kembali status
‫yang disetel ke sukses,
‫sehingga kami dapat mengujinya sekali lagi di sini.
‫Jadi jika ini
‫masalahnya, kami sebenarnya tidak membutuhkan ini,
‫jadi dalam hal ini lokasi janda. isi ulang.
‫Dan kemudian sesuatu yang sangat
‫penting adalah bahwa kita benar-benar perlu menyetelnya ke
‫true di sini, dan itu akan memaksa pemuatan
‫ulang dari server dan bukan dari cache browser, oke?
‫Sekarang dan tentu saja kita perlu menandainya di
‫sini sebagai async, dan oke.
‫Jadi bagian ini di sini sangat penting lagi
‫karena jika tidak, mungkin hanya memuat halaman yang
‫sama dari
‫cache yang kemudian masih memiliki menu pengguna kami di sana.
‫Tapi tentu saja bukan itu
‫yang kami inginkan, kami benar-benar ingin halaman baru turun dari server.
‫Baiklah?
‫Jadi kita memiliki fungsi logout
‫dan sekarang dalam indeks kita pada dasarnya perlu memicunya setelah
‫kita menekan tombol itu.
‫Jadi mari kita buat elemen di sini dulu.
‫Jadi
‫dokumen tombol logout. querySelector dan
‫ingat bagaimana kami membuat elemen ini.
‫Jadi di sini.
‫Jadi yang ini.
‫Jadi kami memilih sekarang berdasarkan kelas ini.
‫Baiklah, dan tentu saja kita bisa menggunakan id juga di
‫sini, tapi itu tidak terlalu penting, oke?
‫Yang penting di sini adalah sekarang
‫mengatakan jika ada
‫tombol logout, lalu logoutButton. tambahkanEventListener.
‫Jadi kami ingin mendengarkan semua peristiwa
‫yang terjadi pada tombol itu setiap kali ada klik.
‫Jadi kita menunggu event click
‫dan ketika itu terjadi kita memanggil fungsi log
‫out yang belum kita impor, jadi
‫mari kita tambahkan disini.
‫Jadi masuk dan keluar.
‫Baiklah, dan memang seharusnya begitu.
‫Jadi, mari kita uji sekarang.
‫Muat ulang lagi hanya untuk memastikan,
‫dan sekarang Oh,
‫kami mendapatkan kesalahan saat keluar.
‫Coba lagi, kenapa begitu.
‫Nah, mari kita coba untuk melihat lebih baik kesalahannya.
‫Tapi yang penting sebenarnya semua ini
‫sudah berjalan.
‫Jadi pendengar acara ini
‫di sini dan juga fungsi logout ini melakukan tugasnya.
‫Jadi mari
‫kita lakukan konsol. kesalahan log. tanggapan.
‫Jadi mari kita reload ini di sini.
‫Seharusnya terjadi secara otomatis.
‫Baiklah.
‫Jadi coba itu lagi.
‫Jadi apa yang terjadi
‫di sini sehingga cast ke objek id gagal untuk nilai logout.
‫Jadi itu sangat aneh.
‫Lihatlah rute itu.
‫Oh, tentu
‫saja, itu kesalahan serius.
‫Harus login tentunya.
‫Oke, tapi hal seperti ini, sekali lagi, selalu terjadi.
‫Jadi mari kita reload ini di sini.
‫Dan coba ini lagi.
‫Dan sekarang kita mendapatkan sesuatu di sini.
‫Sekarang masih dan error,
‫tapi itu tidak masalah sama sekali.
‫Jadi kami memiliki kesalahan token web
‫JSON karena token web JSON kami salah format.
‫Dan itu datang, seperti
‫yang Anda lihat, dari middleware yang masuk.
‫Jadi kita bisa menebak mengapa demikian, bukan?
‫Jadi mari kita kembali menambahkan pengontrol auth kita.
‫Jadi token web JSON yang
‫pada dasarnya kami kirim sekarang ada di sini, kan?
‫Jadi ini logout.
‫Jadi di
‫sini di isLoggedIn yang pada dasarnya akan memicu kesalahan.
‫Jadi di sini, di token web JSON, verifikasi, kan?
‫Dan karena seluruh fungsi di sini
‫dibungkus dalam catchASync ini, ia akan mengirimkan kesalahan ini ke
‫semua middleware penanganan kesalahan global.
‫Dan itu kemudian akan membuat kesalahan ini yang dalam hal
‫ini tidak kita inginkan, ingat?
‫Jadi dalam
‫middleware isLoggedIn ini kami tidak ingin menyebabkan kesalahan apa pun.
‫Jadi, mari kita perbaiki itu
‫dan jadi kita akan menghapus catchASync ini
‫dari sini karena kita tidak ingin menangkap kesalahan Async.
‫Alih-alih apa yang ingin kami lakukan pada
‫dasarnya adalah menangkapnya secara
‫lokal dan kemudian jika ada kesalahan, katakan saja berikutnya.
‫Seperti ini, oke?
‫Jadi mari kita lakukan itu.
‫Jadi bungkus semua ini menjadi percobaan.
‫Tutup di sini.
‫Nah, ada yang salah lagi.
‫Ah! Mungkin kita hanya kehilangan blok tangkapan.
‫Jadi dalam hal ini kami ingin pergi ke middleware berikutnya.
‫Jadi pada dasarnya mengatakan bahwa tidak ada pengguna yang masuk.
‫Benar?
‫Jadi, mari kita uji lagi.
‫Kembalilah, oh , dan sekarang kita tidak lagi login.
‫Jadi masuk.
‫Itu berhasil.
‫Dan sekarang langsung saja kita logout.
‫Ah! Cantik! Sekarang bekerja dengan benar.
‫Dan kali ini yang terjadi di sini adalah
‫tentu saja verifikasi di sini
‫gagal karena token web JSON itu tidak dalam format yang
‫diharapkan oleh algoritma ini.
‫Tapi apa yang terjadi dalam kasus ini
‫adalah bahwa kesalahan tidak ditangkap
‫menggunakan fungsi catchASync kami, tetapi kemudian langsung menangkap
‫err, yang kemudian langsung menuju middleware berikutnya.
‫Baiklah, bagus!
‫Jadi jika kita sekarang melihat cookie
‫kita, kita memiliki satu cookie yang mungkin sudah kedaluwarsa.
‫Jadi Anda melihatnya hanya memiliki umur 10 detik dan jadi jika
‫saya memuat ulang halaman ini sekarang
‫sebenarnya sudah seharusnya hilang.
‫Jadi, Anda tidak melihat cookie yang digunakan.
‫Oke, dan hanya itu yang harus kita
‫lakukan untuk mengeluarkan pengguna dari situs web kita.