‫Ini adalah bagian kedua dari membangun fungsionalitas login kami.
‫Hal pertama yang ingin saya
‫lakukan dalam video ini adalah merender bagian halaman ini secara kondisional.
‫Jadi yang dimaksud adalah membuat
‫tombol masuk dan daftar ini
‫di sini jika pengguna tidak masuk,
‫dan jika pengguna benar-benar masuk dengan
‫baik, maka buat semacam menu pengguna di sini dan
‫juga tombol keluar.
‫Render semacam itu tentu saja
‫harus terjadi di bagian belakang, jadi di salah satu templat pug kami.
‫Sekarang, bagaimana template keluar benar-benar tahu apakah
‫pengguna masuk atau tidak?
‫Sebenarnya, untuk menentukan bahwa
‫kita harus membuat fungsi middleware baru,
‫dan satu-satunya tujuan dari fungsi middleware baru
‫ini adalah apakah pengguna sedang login atau tidak.
‫Anda mungkin berpikir bahwa middleware pelindung kami
‫juga melakukan hal serupa, dan sebenarnya, itu serupa.
‫Tapi bedanya yang
‫satu hanya berfungsi untuk batang yang dilindungi, jadi masuk akal kan?
‫Tetapi fungsi middleware baru kami akan
‫berjalan untuk setiap permintaan di situs web kami yang dirender.
‫Sekarang mari kita praktikkan di sini
‫di authController kita, dan karena ini sangat mirip dengan
‫rute proteksi atau middleware sebenarnya, saya akan melanjutkan
‫dan menyalin yang ini di sini dan kemudian
‫hanya melakukan beberapa modifikasi.
‫Jadi mari kita salin dan tempel di sini
‫dan yang ini akan disebut isLoggedIn.
‫Middleware ini benar-benar hanya untuk halaman yang dirender sehingga tujuannya
‫di sini bukan untuk melindungi rute apa pun sehingga tidak
‫akan pernah ada kesalahan di middleware ini.
‫Mari kita tulis dengan cepat
‫di sini hanya untuk halaman yang dirender, dan tidak akan ada kesalahan.
‫Token kami harus berasal dari cookie dan bukan
‫dari header otorisasi karena,
‫tentu saja, untuk halaman yang dirender,
‫kami tidak akan memiliki token di header.
‫Jadi sekali lagi, untuk seluruh situs web kami
‫yang dirender, token hanya akan selalu
‫dikirim menggunakan cookie, dan tidak pernah menggunakan header otorisasi.
‫Yang itu hanya untuk api.
‫Dan sebenarnya tidak perlu serumit ini, kita cukup
‫mengatakan untuk mengeksekusi semua kode
‫yang kita miliki di sini jika ada tokennya.
‫Atau sebenarnya, jika ada cookie yang disebut jwt pada dasarnya.
‫Jadi mari kita hapus semua ini dan taruh di sini.
‫Saya akan menghapus yang ini dan meletakkannya di akhir.
‫Dan kemudian memformat ulang itu.
‫Sekarang token ini di sini tidak ada,
‫itu hanya meminta cookie. jwt.
‫Jadi ini di sini memverifikasi token.
‫Kemudian kita juga perlu memeriksa apakah pengguna masih ada, dan
‫semuanya dari sini akan sangat
‫mirip dengan apa yang kita miliki sebelumnya dengan pengecualian
‫besar bahwa kita tidak akan membuat kesalahan baru.
‫Kami hanya akan beralih ke middleware berikutnya, tetapi
‫tidak akan terjadi apa-apa.
‫Kemudian kami juga ingin memeriksa
‫apakah pengguna baru saja mengubah kata sandi mereka.
‫Dan lagi, begitu, maka tidak ada kesalahan.
‫Nah, di sini pada akhirnya apa yang
‫akan terjadi jika semua ini
‫di sini benar, jadi jika token diverifikasi, jika pengguna masih ada,
‫dan jika mereka tidak mengubah kata sandi mereka,
‫nah, dalam hal ini berarti ada adalah pengguna yang masuk.
‫Letakkan itu di sini.
‫Jadi ada pengguna yang masuk.
‫Apa yang ingin kami lakukan
‫dalam hal ini adalah membuat pengguna tersebut dapat mengakses template kami.
‫Dan bagaimana kita bisa melakukannya?
‫Sebenarnya itu adalah sesuatu yang tidak kami lakukan sebelumnya
‫dan sekarang ini adalah tempat yang bagus untuk benar-benar mempelajarinya.
‫Kita bisa melakukan respon. penduduk setempat dan kemudian
‫masukkan variabel apa pun di sana.
‫Dan template pug kami kemudian akan mendapatkan akses ke sana.
‫Jadi jika saya mengatakan tanggapan. penduduk setempat. user, maka
‫di dalam template akan ada
‫variabel yang disebut user.
‫Jadi sekali lagi, setiap template pug akan
‫memiliki akses ke response . locals dan apa pun
‫yang kita letakkan di sana akan menjadi
‫variabel di dalam template ini.
‫Jadi ini seperti melewatkan data ke dalam template
‫menggunakan fungsi render.
‫Yang ini tidak lagi kami perlukan, karena kami akan menempatkan
‫pengguna saat ini sebagai respons . penduduk setempat.
‫Dan tentu saja, setelah itu middleware berikutnya dipanggil.
‫Dan kita juga perlu melakukan itu di luar ini
‫Jika, jadi jika tidak
‫ada cookie
‫maka tentu saja middleware
‫berikutnya akan segera dipanggil, karena tentu
‫saja tidak mungkin ada pengguna yang login.
‫Jadi sekali lagi, jika tidak ada cookie, maka tidak
‫ada pengguna yang login.
‫Dan selanjutnya segera, dan kami tidak akan memberikan respons
‫kepada pengguna saat ini. penduduk setempat.
‫Tapi jika ada cookie,
‫yah, lalu kita melalui semua langkah verifikasi ini
‫dan pada akhirnya jika tidak ada
‫yang memanggil middleware berikutnya di tumpukan
‫dengan baik, maka itu berarti ada pengguna yang masuk.
‫Oleh karena itu, kami menempatkan pengguna tersebut sebagai respons . locals, dan seperti itu, kami
‫kemudian memiliki akses ke pengguna itu di
‫template pug kami.
‫Misalnya, di sini di tajuk yang sebenarnya
‫merupakan tempat navigasi pengguna itu.
‫Jadi mari kita benar-benar menggunakannya di
‫sini sebentar lagi, tetapi sebelum kita melakukannya tentu saja juga membutuhkan
‫middleware baru yang baru saja kita buat.
‫Jadi mari datang ke sini untuk melihat rute, dan
‫seperti yang saya katakan di
‫awal, kami ingin middleware ini diterapkan
‫ke setiap rute yang kami miliki di sini.
‫Jadi kami melakukannya sedikit seperti
‫yang kami lakukan sebelumnya dengan melindungi middleware.
‫Jadi pada dasarnya meletakkannya di sini sebelum semua rute lainnya.
‫Dan kemudian itu akan dimasukkan ke dalam tumpukan
‫middleware untuk setiap permintaan yang masuk.
‫Jadi router. gunakan, authController. Apakah sudah masuk.
‫Dan mari kita juga menghapus perlindungan ini
‫dari halaman detail tur
‫karena itu sebenarnya tidak masuk akal.
‫Jadi sekarang kita benar-benar siap untuk menggunakan ini.
‫Jadi mari kita datang ke sini ke header kita dan menggunakan conditional.
‫Sekarang ingat
‫bagaimana saya katakan sebelumnya bahwa conditional di pug tidak terlalu
‫kuat dan sering kali kita benar-benar menggunakan Java Script.
‫Tetapi untuk apa yang ingin
‫kami lakukan sekarang, mereka sebenarnya cukup baik.
‫Jadi yang ingin kami lakukan sekarang adalah mengatakan jika pengguna.
‫Dan untuk itu, mereka berfungsi dengan baik untuk hal-hal yang sangat sederhana hanya
‫untuk menguji apakah suatu variabel ada atau tidak.
‫Jadi jika ada pengguna maka kita ingin menampilkan ini apa yang kita
‫miliki di sini, jadi mari kita taruh itu di sana.
‫Jadi saya menyalinnya di
‫sini, mengomentari
‫kode ini dan kemudian di sini, kami mengatakan yang lain.
‫Jadi seperti di Java Script kita bisa mengatakan if, else.
‫Lalu di sini, saya sebenarnya tidak ingin
‫memesan, tetapi saya ingin logout.
‫Saya tidak yakin mengapa itu ada.
‫Jadi itu logout, dan juga memiliki kelas khusus yang
‫saya buat agar terlihat istimewa di CSS.
‫Jadi nav, el, dan kemudian dengan pengubah, logout, dan mari kita
‫juga menghapus atribut href ini dari sana.
‫Kemudian di sini, kami ingin
‫nama pengguna, jadi pengguna. nama, dan sebenarnya kami hanya ingin nama depan.
‫Jadi misalnya saya membuat akun bernama
‫Jonas Schmedtmann, jadi seperti ini maka saya hanya ingin menampilkan
‫bagian Jonas di sini.
‫Jadi mari kita pisahkan nama menggunakan spasi dan
‫kemudian hanya menampilkan elemen pertama dari
‫array yang dihasilkan.
‫Ingat disini kita cukup menggunakan Java Script seperti ini.
‫Pisahkan dengan spasi, lalu hanya elemen pertama.
‫Kemudian di sini tentu kita juga menginginkan
‫gambar itu, jadi itu gambar /pengguna, ingat, setidaknya saya
‫percaya.
‫Jadi, ini dia, pengguna.
‫Dan kemudian apa pun yang berasal dari database kami.
‫Jadi pengguna. foto, dan kemudian
‫kami juga dapat memberikan teks alternatif yang bagus
‫yang sangat penting untuk aksesibilitas.
‫Mari kita dapatkan di sini.
‫Jadi, mari kita uji ini
‫sekarang, karena saya sebenarnya sangat penasaran untuk melihat apakah ini berhasil.
‫Jadi seperti sebelumnya, izinkan saya melanjutkan dan
‫benar-benar menghapus cookie di sini.
‫Saya tidak yakin apa yang dilakukan penyimpanan lokal ini di sini sekarang.
‫Mari kita hapus itu juga, dan cookie ini juga.
‫Jadi mari kita kembali untuk login di sini, dan
‫sekarang saya harus mengetik ulang ini. tes io, satu, dua, tiga, empat.
‫Langsung saja kita salin disini, login, dan
‫memang kita berhasil login.
‫Jadi, kami mendapatkan kue kami sekarang, ini dia.
‫Tetapi tentu saja foto dan nama pengguna kami tidak langsung
‫ditampilkan di sini, dan itu tentu saja
‫karena ini hanya dapat terjadi setelah
‫memuat ulang, karena
‫itu mengungkapkan siapa yang merender halaman
‫ini, jadi ada semacam kebutuhan untuk memuat ulang.
‫Jadi mari kita terapkan itu sebentar lagi, tapi
‫untuk sekarang mari kita lihat apakah kita sekarang sudah login.
‫Jadi mari kita pergi ke semua tur di sini, dan sekarang
‫kita mendapatkan kesalahan ini di sini.
‫Coba muat ulang di sini.
‫Yah, katanya tidak dapat menemukannya di server.
‫Apa yang terjadi jika kita memuat ulang di sini?
‫Nah, yang ini berfungsi, dan Anda melihat
‫bahwa sebenarnya menu pengguna kami sudah ada di sini.
‫Jadi kami mendapatkan tombol dan gambar
‫logout kami, dan tentu saja nama saya.
‫Besar.
‫Sekarang mari kita
‫coba logout dengan menghapus cookie ini.
‫Dan di video berikutnya kami
‫akan benar-benar menerapkan fungsi yang tepat ini.
‫Dan jika kita memuat ulang sekarang maka itu kembali, bagus!
‫Jadi fungsi middleware yang baru saja kita
‫buat sebelumnya benar-benar melakukan tugasnya.
‫Mari kita masuk
‫sebagai orang lain di sini, jadi katakanlah Laura, baiklah.
‫Jadi Laura, dan daripada dengan tes kata
‫sandi yang sama satu dua tiga
‫empat, masuk, tidak apa-apa, muat ulang, dan itu dia.
‫Jadi ini bekerja dengan sangat baik.
‫Saya hanya khawatir tentang kesalahan ini,
‫jadi sebelum kita melakukan hal lain, kita
‫harus benar-benar memperbaiki yang ini.
‫Dan karena kesalahan ini hanya
‫dimulai setelah kita mulai
‫menggunakan middleware baru ini, mari kita pastikan, lihat
‫apakah itu ada hubungannya dengan itu.
‫Jadi jika kita menghapus
‫middleware ini, mari kita lihat apakah ini berfungsi kembali.
‫Dan ya, sekarang.
‫Jadi itu agak aneh memang.
‫Mari kita lihat apakah
‫kita dapat menemukan beberapa bug di fungsi middleware ini.
‫Apa yang saya lihat di sini
‫segera adalah bahwa kami selalu kembali setiap kali kami menelepon berikutnya, tetapi
‫di sini kami tidak.
‫Jadi itu berarti bahwa jika kita
‫memasuki blok ini di sini, middleware berikutnya akan dipanggil,
‫tetapi kemudian middleware
‫berikutnya akan dipanggil lagi setelah itu.
‫Jadi kita mungkin perlu mengembalikan yang ini ke sini juga.
‫Tapi ini kami pastikan selanjutnya hanya dipanggil sekali.
‫Jadi mari kita coba, pasang yang ini kembali,
‫simpan, gulir ke bawah di sini.
‫Ya, itu berhasil sekarang.
‫Jadi kami
‫mendapatkan pengguna yang masuk di sini juga sekarang, dan tentu saja
‫jika kami menghapus cookie yang pada dasarnya mengeluarkan pengguna, memuat ulang ini
‫sekarang, maka kami kembali normal.
‫Selanjutnya apa yang ingin kami perbaiki di sini adalah untuk benar-benar
‫mendapatkan peringatan di sini, dan
‫juga memuat ulang halaman setelah beberapa waktu.
‫Sebenarnya tidak memuat ulang, tetapi mengirimnya
‫kembali ke beranda.
‫Jadi sekarang ini sudah hilang, dan seperti yang saya
‫katakan sebelumnya kita hanya pernah
‫melihat menu pengguna itu ketika kita memuat ulang halaman.
‫Jadi itulah yang akan kita lakukan sekarang secara otomatis
‫dalam kode Java Script kita di sini.
‫Jadi mari kita, pertama-tama, singkirkan data ini di sini.
‫Mencatat data sensitif ke konsol bukanlah ide yang baik, dan
‫sekarang mari kita lakukan apa yang
‫baru saja saya katakan sebelumnya.
‫Jadi di sini kami melakukan permintaan, dan tentu saja
‫saya juga akan menunjukkan kepada Anda bagaimana kami dapat mengirim data langsung
‫dari formulir htl ke dalam aplikasi Catatan kami.
‫Ada dua cara.
‫Salah satu caranya adalah mengirim
‫data menggunakan permintaan http seperti yang kami lakukan di sini.
‫Dan satu lagi adalah dengan langsung menggunakan formulir html.
‫Dan yang satu itu juga sangat penting, dan nanti
‫di bagian ini saya
‫akan menunjukkan kepada Anda bagaimana melakukannya juga.
‫Bagaimanapun, sekarang mari kita tunjukkan peringatan itu dan muat ulang halaman.
‫Mari kita lakukan itu jika kita benar-benar yakin
‫bahwa panggilan api kita berhasil.
‫Katakanlah tanggapan. data, dan data itu sebenarnya adalah
‫data yang kami
‫kirim sebagai respons hari kami, dan
‫dari sana kami dapat membaca . status, dan periksa apakah itu
‫sama dengan sukses.
‫Jadi, ingat bagaimana kami selalu mengatur
‫status menjadi sukses, dan sekarang kami benar-benar dapat menggunakannya
‫untuk melakukan verifikasi ini.
‫Jadi mari kita gunakan lansiran Java
‫Script sederhana, lansiran seperti ini, dan katakan berhasil masuk.
‫Mari kita singkirkan ini, dan juga mari setelah
‫satu setengah detik memuat halaman depan.
‫Jadi pada dasarnya, halaman rumah.
‫Jadi, jendela. setTimeout, lalu di
‫sini fungsi panggilan balik, dan untuk memuat
‫halaman lain kita katakan location . assign, lalu kita langsung saja masuk ke
‫halaman home seperti ini.
‫Dan kami ingin melakukannya setelah 1500
‫milidetik, jadi, satu setengah detik.
‫Kemudian jika kami
‫tidak berhasil, kami sebenarnya tidak
‫ingin mencatat ini, tetapi kami ingin mengingatkannya.
‫Jadi waspada, dan sekali
‫lagi data ini sebenarnya adalah respons data kami.
‫Jadi dari sini mari kita baca properti pesan.
‫Itu seharusnya berhasil, mari kita muat ulang di sini.
‫Oke, itu bukan orang yang tepat.
‫Jadi, bukannya admin di natours. io, uji satu
‫dua tiga empat lima,
‫untuk melihat kesalahannya terlebih dahulu.
‫Dan begitulah, email atau kata
‫sandi salah, dan tentu saja itu karena
‫kata sandi kita salah, jadi mari kita singkirkan
‫itu, login, dan login dengan sukses.
‫Sekarang mari kita lihat apa yang terjadi.
‫Dan itu sebenarnya tidak memuat ulang
‫secara otomatis, karena sebelum itu terjadi kita
‫perlu menutup jendela ini.
‫Jadi begitu kita menutupnya maka harus segera melakukan reload.
‫Dan begitulah.
‫Kami sekarang berada di halaman
‫beranda, dan sekali lagi dengan menu pengguna yang benar dirender di sini, sempurna.
‫Jadi bagian ini selesai juga, dan sekarang sebagai langkah
‫terakhir saya ingin meningkatkan peringatan
‫yang didapat pengguna ini.
‫Alih-alih menampilkan peringatan Skrip Java bawaan ini.
‫Juga, kita akan melakukan bundling Java Script yang telah
‫saya sebutkan beberapa kali, tapi kita akan
‫meninggalkan semua itu untuk video berikutnya
‫karena saya tidak ingin membebani masing-masing terlalu banyak.