Salam semua untuk tutorial singkat ini saya akan menunjukkan cara membuat tombol logout Anda sendiri. Ini akan berfungsi baik di Elementor versi gratis atau pro
Lingkungan Pementasan Saya
Tema. Halo
Versi Elemen. Pro
Mari kita mulai
Untuk tutorial ini kita hanya akan menggunakan widget tombol sederhana tetapi Anda dapat menerapkannya di mana saja termasuk link menu di header atau sidebar
Seret widget tombol ke halaman
Buka opsi konten untuk widget tombol dan terapkan tautan ini
[html]//yoursite.com/wp-login.php?action=logout[/html]
Penting. Ingatlah untuk mengganti situs Anda. com dengan alamat web Anda atau itu tidak akan berfungsi
Simpan & Publikasikan
Ketika Anda mengklik tombol di ujung depan, Anda akan dibawa ke layar yang menanyakan apakah Anda ingin keluar
Di bagian kami sebelumnya, kami berhasil meningkatkan header UI dan pesan UI. Pada bagian ini, kita akan mempelajari cara menghubungkan tombol logout dan cara mengarahkan pengguna ke MEAN Stack. Kami akan mempelajari keduanya selangkah demi selangkah, dan pertama-tama kami belajar cara menghubungkan tombol logout ke aplikasi. Kami akan menggunakan langkah-langkah berikut untuk melakukan ini
1] Kami akan kembali ke komponen kami. ts dan tambahkan pendengar klik ke tombol logout. Kami akan menjalankan metode onLogout[] pada klik tombol
2] Sekarang, kita perlu menambahkan metode ini di dalam komponen. berkas .ts. Metode ini harus menghapus token dan memberi tahu semua bagian yang berkepentingan di halaman tentang status otentikasi yang diubah
3] Kami perlu mengedit layanan autentikasi lagi, dan di sana kami memerlukan metode baru, yaitu. e. , keluar. Dalam metode ini, kami ingin melakukan dua hal utama, yaitu. e. , kami akan menyetel token ke null untuk menghapusnya dan menyetel isAuthenticated ke false
4] Sekarang, kami perlu menyampaikan informasi itu kepada siapa saja yang tertarik. Jadi, kami akan menggunakan subjek authStatusListener kami dan mendorong nilai baru, yang salah karena pengguna sekarang tidak diautentikasi lagi
5] Metode logout tersebut harus dipanggil dari dalam metode onLogout[] di komponen header. Jadi, di sana kita akan mencapai layanan autentikasi kita dan kemudian memanggil metode logout[]
Kami akan menyimpan semua file dan pergi ke aplikasi sudut kami
Semuanya bekerja dengan baik, dan sekarang kita akan belajar bagaimana mengarahkan pengguna. Kami akan menggunakan langkah-langkah berikut untuk mengarahkan ulang pengguna
Kami akan mengimplementasikan logika pengalihan di layanan autentikasi kami, dan layanan autentikasi adalah tempat yang tepat untuk melakukan berbagai hal karena di sana kami melakukan login dan logout
1] Jadi, untuk mengarahkan ulang pengguna, kita harus menyuntikkan @angular/router. Kami akan menambahkan argumen baru ke konstruktor, yang bertipe router. Router adalah objek atau kelas yang diimpor dari @angular/router
2] Sekarang, kita akan menggunakannya dalam metode login[]. Dalam metode berlangganan, ketika kita mengetahui bahwa kita memiliki token yang valid, pada akhirnya, kita akan menjangkau router kita dan memanggil metode navigasi[]. Kami ingin menavigasi ke halaman beranda, jadi kami akan meneruskan garis miring [/] ke fungsi itu
Kami juga ingin menavigasi ke sana jika kami keluar. Di sana setelah kami membersihkan semuanya, kami ingin meninggalkan halaman tempat kami berada dan kembali ke halaman beranda
Sekarang, kami akan memeriksa apakah kami akan mengarahkan ke halaman beranda setelah masuk atau keluar
3] Mengarahkan ulang ke halaman beranda berfungsi dengan baik. Kami mungkin memperhatikan bahwa kami harus menunggu dalam rentang waktu yang sangat singkat jika kami mengklik login. Waktu yang dibutuhkan bagi kami untuk mengirimkan permintaan itu dan memvalidasi pengguna di server. Akan menyenangkan untuk menunjukkan pemintal di sana. Itu hanya hal kecil, tetapi kami ingin menambahkan pemintal seperti itu ke komponen login dan pendaftaran. Kami sudah memiliki komponen pemintal yang disertakan dalam aplikasi untuk menambahkan mat-spinner di bawah tombol di komponen pendaftaran dan masuk. Untuk itu, kita perlu mengetahui apakah kita loading atau tidak. Kami sudah pergi ke Memuat properti di kedua komponen, dan kami hanya perlu mengaturnya saat kami memuat
Jadi, dalam metode onSignup[], kita akan menyetel Loading ke true dan sama dalam metode onLogin[]
Gabung
Daftar
4] Sekarang, di template, kita akan menggunakannya. Kami ingin menyembunyikan tombol itu jika kami memuat, dan pada saat yang sama, kami ingin memutarnya
Kami akan menerapkan logika yang sama untuk komponen pendaftaran kami
Catatan. Kami sudah menerapkannya di bagian atas, jadi kami menyarankan Anda untuk menghapusnya, yang kami terapkan di bawah tombol di templat komponen login dan pendaftaran
Sekarang, kami akan kembali ke aplikasi sudut kami dan mencoba masuk atau mendaftar untuk memeriksa apakah pemintal kami berfungsi dengan baik atau tidak
Semuanya bekerja dengan baik. Hal berikutnya adalah menjaga rute karena kita dapat mengakses halaman posting baru dengan masuk ke URL tersebut. Kami akan melakukannya nanti di bagian selanjutnya