Tutorial Framework7 Authentication #4 Logout


Kurnia Andi Nugroho
Semoga kita semua diridhoi
Tutorial Framework7 Authentication #4 Logout

Setelah sebelumnya kita sudah berhasil membuat login,sign up, dan juga update user profile. Kemudian pada sesi ini akan kita lanjutkan pada materi logout, pada tutorial login, kita telah menambahkan localstorage yang bertujuan untuk menyimpan status login user berdasarkan id dan username dengan menggunakan perintah loca lStorage.setItem. Jika ingin menghilangkan fungsi ini, kita cukup merubah menjadi localStorage.removeItem.

Pada navbar kita terdapat link dengan icon power, kita akan memanfaatkan link ini untuk proses logout, jika ditampilkan dalam bentuk baris kode maka seperti ini.

<div class="left">
              <a href="#" id="logout" class="link icon-only">
                <i class="icon f7-icons">power</i>
              </a>
            </div>

apabila dalam bentuk project, maka akan seperti gambar dibawah ini :

Kembali lagi pada baris kode navbar <a href="#" id="logout" class="link icon-only">, disini attribute id memliki value logout , value ini akan kita gunakan sebagai id pada function JavaScript kita.

Silahkan teman-teman tambahkan baris kode dibawah ini kedalam file my-app.js.

$$("#logout").click(function () {
  localStorage.removeItem("status");
  localStorage.removeItem("id");
  localStorage.removeItem("username");
  app.dialog.alert("Sukses Logout");
  cek_login();
});

diatas merupan function untuk menghapus localStorage, dan pada baris terakhir terdapat cek_login();. function ini untuk mengecek status user apakah sudah login apa belum. Mari kita buat function nya seperti berikut ini:

cek_login();

function cek_login() {
  var status = localStorage.getItem("status");
  if (status == "login") {
    app.views.main.router.navigate('/admin/');
  } else {
    app.views.main.router.navigate('/home/');
  }
}

Jika status sama dengan login maka user akan di alihkan ke halaman admin, dan apabila status tidak login, maka user akan di alihkan ke halaman awal yaitu page home yang menampilkan form login. sekian penjelasan sederhana dari kami, semoga menjadikan ilmu yang bermanfaat, semua kesalahan dalam penulisan, kami mohon maaf.


Kurnia Andi Nugroho
Semoga kita semua diridhoi

Suka dengan tulisan di SantriKoding? Kamu bisa memberikan dukungan dengan berdonasi atau bagikan konten ini di sosial media. Terima kasih atas dukungan Anda!

KEBIJAKAN KOMENTAR

Saat memberikan komenatar silahkan memberikan informasi lengkap tentang error, seperti: screenshot, link kode, dll. Baca aturan komentar kami