Pemantau Status Log Masuk JavaScript Vanila

pengenalan

Dalam bidang pembangunan web, JavaScript kekal sebagai teknologi asas. Walaupun rangka kerja dan perpustakaan boleh memudahkan pembangunan, menguasai Vanilla JavaScript menyediakan asas yang kukuh untuk memahami selok-belok bahasa. Sebagai amalan terbaik, saya mengesyorkan agar pembangun, terutamanya mereka yang baharu dalam bidang itu, menumpukan pada mengasah kemahiran Vanilla JavaScript mereka sebelum meneroka rangka kerja.

Kepentingan Menjejak Status Log Masuk Pengguna
Menguruskan status log masuk pengguna dengan berkesan adalah penting untuk memastikan keselamatan, kecekapan dan keseluruhan pengalaman pengguna aplikasi web. Faedah melaksanakan penjejakan log masuk pengguna termasuk:

1. BAHAGIAN PERTAMA
2. Keselamatan Dipertingkat: Halang akses tanpa kebenaran kepada data sensitif dengan menghendaki pengguna log masuk sebelum mendapat akses. Penggunaan Sumber Dioptimumkan: Minimumkan permintaan yang tidak perlu kepada pelayan dengan menyimpan data secara setempat dan mengemas kini hanya apabila perubahan berlaku.

• Integriti Data: Pastikan data konsisten dengan mengawal pengubahsuaian, penambahan dan pemadaman.
  Pengalaman Pengguna yang Dipertingkat: Gunakan cap masa untuk log keluar pengguna tidak aktif secara automatik, meningkatkan keselamatan dan memperkemas pengalaman pengguna.

• Interaksi Pelayan Lancar: Wujudkan saluran komunikasi yang mantap antara pelanggan dan pelayan, membolehkan pertukaran data dan penyegerakan yang cekap.

Dengan melaksanakan sistem penjejakan log masuk pengguna yang direka bentuk dengan baik, pembangun boleh meningkatkan keselamatan, prestasi dan kualiti keseluruhan aplikasi web mereka dengan ketara.

1. BAHAGIAN KEDUA:

kini Mari kita menyelami kod:

pertama, benarkan pembolehubah untuk mengakses storan setempat peranti:
storan const = window.localStorage;

kedua, kami akan mencipta pembolehubah yang mempunyai nilai data awal/lalai.
Nilai data yang sama akan dikemas kini apabila data baharu tiba atau ditukar.

ini ialah pembolehubah:

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

1. BAHAGIAN KETIGA:

kini mari buat fungsi untuk menyimpan data ke dalam storan setempat peranti:

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

kini mari buat bahagian utama kod kami,
yang merupakan fungsi pengurang kami,

fungsi ini akan bertanggungjawab untuk mengawal data dengan memasukkan, mengemas kini, memadam daripada storan setempat peranti kami.

Berikut ialah kod:

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

Mari kita pecahkan kod ini langkah demi langkah:
Tandatangan Fungsi
JavaScript

function myReducer(state = initialState, action) {
  // ...
}

Ini ialah fungsi pengurang, yang merupakan konsep utama dalam perpustakaan pengurusan negeri seperti Redux. Pengurang mengambil dua hujah:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

Pernyataan Tukar
JavaScript

switch (action.type) {
  // ...
}

Pernyataan suis ini menyemak sifat jenis objek tindakan dan melaksanakan blok kod yang sepadan.
Kes LOGIN

JavaScript

const initialState = {
     userData: storage.getItem('exampleUserData') || null,
     timestamp: null,
     isLoggedIn: false
        };

Apabila action.type ialah "LOGIN", pengurang:

function cacheUserData(data) {
  storage.setItem('exampleUserData', JSON.stringify(data));
}

Kes LOG OUT
JavaScript

function myReducer(state = initialState, action) {
  switch(action.type) {
    case "LOGIN":
      cacheUserData(action.payload);
      return {
        userData: action.payload,
        timestamp: Date.now(),
        isLoggedIn: true
      };

    case "LOGOUT" : 
      storage.removeItem('exampleUserData');
      return {
        userData: null,
        timestamp: null,
        isLoggedIn: false
      };  
    default:  
      return state;
  }
};

Apabila action.type ialah "LOGOUT", pengurang:

function myReducer(state = initialState, action) {
  // ...
}

Kes Lalai
JavaScript

lalai:
keadaan kembali;

Jika action.type tidak sepadan dengan mana-mana kes di atas, pengurang hanya mengembalikan keadaan semasa tanpa membuat sebarang perubahan.
Ringkasnya, fungsi pengurang ini menguruskan keadaan log masuk pengguna dengan bertindak balas kepada tindakan "LOGIN" dan "LOG OUT".

Akhir sekali tetapi tidak kurang pentingnya, berikut adalah fungsi yang akan digunakan sebagai output data yang betul.
Penting: Kami sepatutnya menambah eksport ke fungsi ini supaya ia boleh digunakan dalam fail lain, tetapi kerana di sini ia berada dalam satu fail, kami tidak perlu melakukannya. Anda boleh melawati pautan github di bawah, untuk melihat projek yang lebih besar yang mempunyai fungsi yang sama.

Fungsi Pengurusan Data Pengguna
Dalam bahagian ini, kami akan meneroka fungsi userData.js, yang memainkan peranan penting dalam mengurus data pengguna.
Kod FungsiData pengguna
JavaScript:

state: The current state of the application. If no state is provided, it defaults to initialState.
action: An object that describes the action to be performed.

Pecahan Kod
Mari kita membedah fungsi userData langkah demi langkah:
Tandatangan Fungsi
JavaScript

switch (action.type) {
  // ...
}

Fungsi tak segerak ini, userData, menerima dua parameter:

case "LOGIN":
  cacheUserData(action.payload);
  return {
    userData: action.payload,
    timestamp: Date.now(),
    isLoggedIn: true
  };

Mengambil Data Pengguna
JavaScript

Calls the cacheUserData function with the action.payload (which contains the user data).
Returns a new state object with the following properties:
    userData: The user data from the action.payload.
    timestamp: The current timestamp.
    isLoggedIn: Set to true.

Barisan ini mengambil data pengguna daripada urlLink yang ditentukan menggunakan fungsi fetchUserData. Kata kunci tunggu memastikan bahawa kod menunggu janji diselesaikan sebelum meneruskan.
Memanggil Peredam

JavaScript:

case "LOGOUT":
  storage.removeItem('exampleUserData');
  return {
    userData: null,
    timestamp: null,
    isLoggedIn: false
  };

Barisan ini memanggil fungsi myReducer, menghantar:

Removes/dete the user data from storage using storage.removeItem.
Returns a new state object with the following properties:
    userData: Set to null.
    timestamp: Set to null.
    isLoggedIn: Set to false.

Pengurang mengembalikan objek keadaan baharu, yang diperuntukkan kepada pembolehubah keadaan.
Mengemas kini Hartanah Negeri

JavaScript:

const userData = async (type) => {

    const userData = await myUserData;
    const state = myReducer(undefined, { type: type, payload: userData });

    state.timeStamp = state.timestamp;
    state.isLoggedIn = state.isLoggedIn;

    return state;
};

Barisan ini mengemas kini dua sifat objek keadaan:

const userData = async (type) => {
  // ...
}

Mengembalikan Negeri
JavaScript

keadaan kembali;

Akhir sekali, fungsi mengembalikan objek keadaan yang dikemas kini.
Contoh Output
Apabila kami memanggil fungsi userData dengan tindakan yang berbeza, kami mendapat output berikut:
Data Log Masuk:
JSON

urlLink: A URL link used to fetch user data.
type: A string indicating the type of action (e.g., "LOGIN" or "LOGOUT").

Data Log Keluar:
JSON

const userData = await fetchUserData();

Seperti yang anda lihat, kod kami mampu mengalih keluar data apabila pengguna log keluar. Kami juga boleh menggunakan timeStamp untuk log keluar pengguna secara automatik selepas tempoh tidak aktif yang berpanjangan atau apabila tab tapak web ditutup.

Untuk kod penuh termasuk manupulasi dom lawati pautan github:

https://github.com/TrevoDng/logig-status-monitor-frontend

Atas ialah kandungan terperinci Pemantau Status Log Masuk JavaScript Vanila. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!