Periksa apakah Axios memiliki cookie sesi

Question

Saya menerapkan penjaga navigasi untuk aplikasi Vue.js saya, memeriksa apakah pengguna sudah masuk. Saya rasa cara terbaik adalah dengan menanyakan Axios apakah ia memiliki cookie sesi atau tidak. Sesuatu seperti ini:

router.beforeEach((to, from, next) => {
  if (Vue.axios.hasSessionCookie())
    next()
  else
    next(false);
}

Kecuali, tentu saja, hasSessionCookie()tidak ada, dan saya tidak melihat yang seperti itu di dokumen. Adakah cara, mungkin dengan beberapa ekstensi?

Ya, saya tahu saya bisa menyimpan status login di toko VueX. Menurut saya itu bukan ide yang baik karena status akan disetel ulang jika pengguna, dengan kebijaksanaannya yang tak terbatas, menyegarkan laman dan dengan demikian menyetel ulang aplikasi. Solusi lain yang saya pikirkan adalah titik akhir backend di mana aplikasi dapat "bertanya" apakah sudah masuk. Tapi itu juga cukup timpang.

Answer 1

Terima kasih atas semua tipnya. Solusi yang tepat adalah sebagai berikut:

• VueX menyimpan status login (hanya sebuah bendera Boolean) yang diperiksa oleh penjaga navigasi
• Ketika pengguna masuk atau keluar, saya menyetel bendera
• Ketika aplikasi diluncurkan, saya memanggil /checkloginrute di server sebelum Vue instance dibuat. Ini hanya mengembalikan kode status 200 atau 401 tergantung pada apakah pengguna memiliki sesi yang valid atau tidak. Lalu saya mengatur bendera VueX sesuai. Dengan cara ini pengguna dapat menyegarkan browser tetapi VueX akan tetap tahu apakah dia masuk atau tidak.
• Ditambah saya menambahkan interseptor Axios untuk mendeteksi kesalahan 401. Jika ada, berarti sesi sudah expired. Ini kemudian menetapkan bendera VueX ke falsedan mengarahkan pengguna ke halaman login.

Saya menulis artikel di blog Medium saya dengan detail dan cuplikan jika ada yang peduli. https://medium.com/developer-rants/session-management-between-express-and-axios

Answer 2

Karena ini adalah cookie sisi server, Anda tidak dapat memeriksanya di javascript sisi klien, Anda perlu membuat permintaan HTTP ke server ekspres Anda untuk memeriksa apakah ada sesi. Buat rute sederhana di server ekspres Anda seperti ini:

app.get("/checkcookie", function(req,res) {
    if (req.session.yourSessionVariableName) {
        res.status(204).send();
    } else {
        res.status(401).send();
    }
});

Kemudian periksa penjaga navigasi vue Anda:

router.beforeEach(async (to, from, next) => {
  const response = await axios.get("http://yourexpressbackend.com/checkcookie");
  if (response.status === 204)
    next()
  else
    next(false);
}

Answer 3

Anda menuju ke arah yang benar tetapi axios adalah klien HTTP dan tidak ada hubungannya dengan cookie juga tidak peduli tentang cookie atau penyimpanan .. jadi Anda perlu menggunakan paket seperti vue-cookie untuk mengatur dan mendapatkan cookie.

Answer 4

Tamás Polgár, Anda mendokumentasikan tantangan yang sama persis dengan yang saya alami dengan Vue; apa yang harus dilakukan dengan login jika terjadi peristiwa browser yang tidak terduga dan penyimpanan hilang.

Toko Vue:

Toko Vue dimaksudkan sebagai lokasi yang nyaman bagi SPA untuk menyimpan bendera semacam itu (masuk atau tidak), namun, toko tersebut sepenuhnya dihapus dan dibangun kembali dengan setiap instans Vue, yang berarti jendela / tab browser baru, refresh, atau kejadian tak terduga lainnya yang memicu penyegaran browser.

Jadi pendekatan Anda menjelaskan panggilan back-end ekstra untuk memeriksa status dengan cepat, yang merupakan IMO solusi yang sah dan dapat bekerja.

Ada juga dua solusi potensial lainnya, yang kedua telah saya terapkan di SPA saya sendiri:

Dua Solusi Lain

1) Jangan sentuh kode back end Anda sama sekali. Gunakan vue-cookies agar browser klien mengatur cookie setelah login dibuat (ini akan benar-benar terpisah dari cookie http-only yang dibutuhkan server API back-end).

Cookie ini akan tetap ada setelah browser disegarkan. Saya tidak menggunakan (atau mencoba) pendekatan ini, bagaimanapun, karena saya tidak ingin main-main dengan mengubah front-end saya untuk memeriksa cookie lokal setiap kali saya ingin memeriksa status login.

Kode ujung depan dapat menggunakan cookie ini untuk mencari tahu apakah orang tersebut masih login atau tidak.

2) Pendekatan lain yang terpisah adalah melakukan hubungan pendek pada pemeriksaan API back-end normal untuk otentikasi hanya untuk pengontrol rute tertentu itu , tetapi tidak untuk rute lainnya.

Inilah cara kerja 'korsleting' di bagian belakang:

Dalam kasus metode pengontrol rute tertentu, periksalah terlebih dahulu keberadaan pengguna dalam permintaan, lalu kembalikan 200 tetapi dengan status "salah" atau beberapa variabel lain yang juga muncul dalam respons sukses.

Ini kontra-intuitif, tetapi ini memberi Axios ujung depan panggilan sesuatu untuk diambil selain hanya respons kesalahan standar.

CATATAN : Saya menyebutnya "sirkuit pendek" karena jika metode pengontrol rute API back-end memiliki banyak kode, membuat pemeriksaan ini sebagai hal PERTAMA yang dilakukannya akan menghindari bagian panggilan yang mahal.

Pendekatan ini bekerja dengan sempurna untuk kebutuhan saya dan tidak memerlukan panggilan API baru atau sekunder.