Pengurusan sesi pada bahagian hadapan ialah bahagian penting dalam mengurus pengesahan pengguna, keadaan dan interaksi dengan aplikasi web. Dalam konteks pembangunan bahagian hadapan, pengurusan sesi biasanya melibatkan pengendalian sesi pengguna melalui kuki, storan setempat, storan sesi atau sistem berasaskan token (seperti JWT) untuk memastikan pengguna boleh kekal log masuk merentas muat semula halaman atau antara lawatan ke apl. Di bawah ialah beberapa teknik biasa untuk mengendalikan pengurusan sesi pada bahagian hadapan:

1. Kuki

• Penggunaan: Kuki ialah cebisan kecil data yang disimpan pada penyemak imbas pengguna dan boleh dihantar dengan setiap permintaan HTTP ke pelayan.
• Kuki Sesi: Ini adalah kuki sementara yang dipadamkan sebaik sahaja penyemak imbas ditutup.
• Kuki Berterusan: Kuki ini disimpan sehingga tarikh tamat tempoh yang ditetapkan.
• Kuki Selamat: Kuki boleh ditandakan sebagai HttpOnly (tidak boleh diakses melalui JavaScript) atau Secure (hanya dihantar melalui HTTPS).

• Contoh:
  

   document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";
  

• Kebaikan:

  • Mudah untuk dilaksanakan.
  • Boleh berterusan merentas sesi penyemak imbas.

• Keburukan:

  • Terdedah kepada serangan skrip merentas tapak (XSS) (terutamanya jika tidak bertanda HttpOnly).
  • Boleh diusik (jika tidak dilindungi dengan betul).

2. Storan Tempatan

• Penggunaan: Storan setempat ialah satu cara untuk menyimpan data pada bahagian klien, yang berterusan walaupun selepas pengguna menutup tetingkap penyemak imbas mereka.

• Contoh:
  

   localStorage.setItem("userToken", "your_jwt_token_here");
   const token = localStorage.getItem("userToken");
  

• Kebaikan:

  • Kapasiti storan yang besar (~5-10MB).
  • Mudah digunakan.

• Keburukan:

  • Data boleh diakses melalui JavaScript, jadi ia terdedah kepada serangan XSS.
  • Tidak boleh dihantar secara automatik dengan permintaan HTTP (memerlukan kemasukan manual dalam pengepala).

3. Storan Sesi

• Penggunaan: Sama seperti storan tempatan tetapi data dikosongkan sebaik sahaja penyemak imbas atau tab ditutup.

• Contoh:
  

   sessionStorage.setItem("userSession", "active");
   const session = sessionStorage.getItem("userSession");
  

• Kebaikan:

  • Storan sementara dengan pembersihan automatik pada akhir sesi.
  • Lebih selamat daripada storan tempatan untuk data jangka pendek.

• Keburukan:

  • Tidak boleh berterusan merentas sesi penyemak imbas.
  • Terdedah kepada XSS.

4. JWT (Token Web JSON)

• Penggunaan: JWT ialah format token yang padat dan selamat URL yang biasa digunakan untuk menghantar maklumat pengesahan.
• Token biasanya disimpan dalam storan atau kuki tempatan dan boleh dihantar sebagai sebahagian daripada pengepala HTTP (biasanya pengepala Kebenaran).

• Contoh:
  

   document.cookie = "username=JohnDoe; expires=Thu, 18 Dec 2024 12:00:00 UTC; path=/";
  

• Kebaikan:

  • Pengesahan tanpa status.
  • Boleh skala dan cekap untuk aplikasi moden.
  • Boleh menyimpan tuntutan tersuai (cth., peranan pengguna, kebenaran).

• Keburukan:

  • Memerlukan penyimpanan yang selamat dan pengendalian yang betul untuk mengelakkan kecurian.
  • Saiz token boleh menjadi besar, menjejaskan prestasi.

5. Pengurusan Negeri (cth., Redux, Vuex, dll.)

• Penggunaan: Perpustakaan pengurusan keadaan bahagian hadapan (seperti Redux, Vuex) membolehkan anda mengurus keadaan sesi pengguna dalam stor berpusat, mendayakan keadaan sesi kongsi merentas pelbagai komponen.
• Pendekatan ini sering digunakan bersama dengan mekanisme storan sesi lain seperti kuki atau JWT, terutamanya untuk apl yang lebih kompleks yang perlu menyimpan maklumat sesi dinamik (seperti butiran pengguna log masuk).

• Contoh (dengan Redux):
  

   localStorage.setItem("userToken", "your_jwt_token_here");
   const token = localStorage.getItem("userToken");
  

• Kebaikan:

  • Pengurusan negeri berpusat.
  • Mudah untuk menjejak dan mengurus data berkaitan sesi.

• Keburukan:

  • Boleh menjadi kompleks dalam aplikasi yang lebih besar.
  • Memerlukan penyepaduan dengan mekanisme storan lain.

6. Perpustakaan Pengurusan Sesi

• Perpustakaan/Kerangka: Terdapat juga perpustakaan yang direka bentuk untuk mengabstrak pengurusan sesi di bahagian hadapan, seperti:
  • Auth0: Menyediakan perkhidmatan pengesahan dan kebenaran, termasuk pengurusan sesi.
  • Pengesahan Firebase: Perkhidmatan Google Firebase untuk mengendalikan pengesahan pengguna, menyimpan keadaan sesi.
  • OAuth/OpenID: Protokol standard untuk mengendalikan pengurusan sesi, biasanya digunakan dengan penyedia pihak ketiga (Google, Facebook, dll.).

7. Aliran Pengesahan Selamat

• OAuth/OpenID: Jika anda perlu menyepadukan dengan penyedia pengesahan pihak ketiga (Google, Facebook), anda boleh menggunakan protokol OAuth atau OpenID Connect. Piawaian ini membolehkan anda mengurus sesi dengan selamat tanpa menyimpan data sensitif seperti kata laluan terus dalam apl anda.
• Tajuk Kebenaran (Token Pembawa): Selalunya digunakan dalam panggilan API dengan token JWT atau OAuth, membenarkan pengurusan sesi yang lancar dengan menyimpan token di sisi pelanggan.

Amalan Terbaik:

1. Storan Selamat:

   • Gunakan kuki HttpOnly dan Secure untuk menyimpan token sensitif atau data sesi untuk mengurangkan risiko XSS.
   • Pertimbangkan untuk menggunakan pendekatan hibrid (kuki untuk pengesahan dan localStorage/sessionStorage untuk data pengguna tambahan).

2. Tamat Tempoh Sesi:

   • Tetapkan masa tamat tempoh untuk token atau sesi untuk mengelakkan sesi berpanjangan yang boleh menjadi risiko keselamatan.
   • Gunakan token muat semula untuk melanjutkan sesi tanpa mengesahkan semula pengguna setiap kali.

3. Mekanisme Log Keluar:

   • Pastikan data sesi dikosongkan apabila pengguna log keluar, termasuk token dalam storan atau kuki tempatan.
   • Untuk data sensitif, pertimbangkan untuk membatalkan bahagian pelayan sesi juga.

4. Perkongsian Sumber Rentas Asal (CORS):

   • Pastikan aplikasi anda selamat apabila mengakses API silang asal, terutamanya apabila menggunakan kuki atau token.

5. Pembatalan Token:

   • Laksanakan mekanisme pembatalan token jika menggunakan JWT, jadi token boleh menjadi tidak sah sebelum tamat tempoh sekiranya terdapat aktiviti yang mencurigakan.

Kesimpulan:

Pengurusan sesi hadapan ialah bahagian penting dalam membina aplikasi web yang selamat dan lancar. Ia boleh dikendalikan melalui kuki, storan tempatan, storan sesi atau token, dengan setiap kaedah mempunyai kebaikan dan keburukan. Gabungan kaedah ini—bersama-sama dengan amalan selamat seperti tamat tempoh token, pengurangan XSS dan storan token selamat—akan membantu memastikan apl anda berfungsi dan selamat.

Atas ialah kandungan terperinci Pengurusan Sesi Hadapan: Daripada Kuki kepada JWT. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!