Menggunakan Session Dan Cookie Di Express JS Dan Vue JS - CRUDPRO
Home  ›  nodejs  ›  vuejs

Menggunakan Session Dan Cookie Di Express JS Dan Vue JS

Written By Wednesday, December 7, 2022
Menggunakan Session Dan Cookie Di Express JS Dan Vue JS

Tampaknya lebih sulit membuat Axios bermain bagus dengan backend daripada yang seharusnya.

Dalam postingan terbaru saya, saya menulis tentang membangun autentikasi Google untuk proyek Vue.js dan Node.js/Express. Kata penutup saya adalah: “Sebaiknya memulai sesi dan menyimpan nama pengguna, ID pengguna, dan mungkin alamat email untuk referensi lebih lanjut.” Saya mendapat umpan balik dari pembaca dan tampaknya mengimplementasikan ini lebih sulit daripada kedengarannya. Axios, perpustakaan HTTP yang paling sering digunakan untuk Vue.js tidak mengambil atau mengirim cookie secara otomatis, termasuk ID sesi, dan Express juga tidak mengirimnya begitu saja. Jadi, bahkan jika Anda mengatur variabel sesi di Node, frontend akan tetap mengabaikannya, dan pengguna akan diperlakukan sebagai tidak masuk, karena tidak ada identifikasi sesi yang masuk ke backend.

Dari Sisi Backend

Menerapkan sesi di Node dan Express cukup mudah. Anda memerlukan beberapa dependensi:

npm i cookie-parser express-session cors

Mari import mereka…

import * as cookieParser from 'cookie-parser';
import * as session from 'express-session';
import * as cors from 'cors';

Sekarang mari siapkan sesi dan penanganan cookie.

//  Populate req.cookies
this.express.use(cookieParser());//  Session setup
this.express.use(session({
  secret: 'wow very secret',
  cookie: {
    maxAge: 600000,
    secure: true
  },
  saveUninitialized: false,
  resave: false,
  unset: 'destroy'
}));

Apa arti dari semua ini? Pengaturan sesi memiliki parameter sebagai berikut:

Secret adalah string acak, kunci untuk menyandikan cookie sesi. Ini adalah pilihan yang diperlukan.

cookie.maxAge menetapkan berapa lama cookie harus tetap hidup, dalam milidetik. Dalam contoh ini adalah 10 menit.

cookie.secure memberi tahu Express untuk menggunakan cookie aman atau tidak. Jika true, The Set-Cookie: Secure akan ditambahkan ke header respons. Inilah tangkapannya: ini hanya berfungsi dengan HTTPS. HTTP lama biasa tidak mendukung cookie aman, dan seluruh penanganan sesi tidak akan berfungsi jika Anda menyetelnya ke true. Jadi jika Anda tidak menggunakan HTTPS, setel ke false. Sesi akan tetap berfungsi, hanya cookie yang tidak aman.

saveUninitialized memberi tahu Express untuk menyimpan sesi baru jika belum ada. Ini direkomendasikan untuk disetel ke false saat mengimplementasikan sesi login. Nilai defaultnya true, tetapi ini akan berubah di versi sesi ekspres yang akan datang.

resave adalah opsi lain yang diperlukan. Jika true, sesi akan disimpan di setiap panggilan yang dilakukan oleh klien, terlepas dari apakah itu diubah atau tidak. Biasanya itu harus false. Sama seperti dengan saveUninitialized, nilai defaultnya true yang akan berubah.

unset memberi tahu Express apa yang harus dilakukan dengan sesi saat klien mengakhirinya. Saya biasanya mengaturnya ke destroy yang menghapus semua data sesi. Opsi lainnya adalah keep tetapi mengapa Anda ingin menyimpan data yang kedaluwarsa?

Untuk informasi lebih lanjut, lihat dokumentasi express-session.

Sekarang kami juga harus menyiapkan kebijakan CORS.

this.express.use(cors({
            origin: [
              'http://localhost:8080',
              'https://localhost:8080'
            ],
            credentials: true,
            exposedHeaders: ['set-cookie']
        }));

CORS mengatur domain apa yang dapat melakukan panggilan ke backend Anda, dan penting untuk mencegah serangan lintas situs. Di sini saya mengizinkan localhost:8080 karena ini yang saya gunakan untuk pengembangan. Dalam lingkungan produksi, Anda harus menambahkan nama domain dan alamat IP dengan cara yang sama, sebaiknya dengan https:// dan http://.

Yang penting di sini adalah pengaturan credentials. Itu memerintahkan Express untuk meneruskan header bersama dengan semua respons HTTP. Saat cookie berjalan dengan header, dan cookie sesi adalah salah satunya, jelas kami membutuhkan ini untuk menjadi true.

exposeHeaders adalah daftar field header yang akan dimasukkan ke dalam header. Kami hanya tertarik pada cookie, jadi itulah satu-satunya pilihan di sini.

Untuk opsi lainnya, lihat dokumentasi Express CORS.

Dari Sisi frontend

Memberitahu Axios untuk menerima cookie sesi sangat mudah sekarang. Buka file main.ts Anda dan…

import axios from 'axios';
import VueAxios from 'vue-axios';axios.defaults.withCredentials = true;
Vue.use(VueAxios, axios);

Ini akan secara otomatis menambahkan withCredentials: true ke setiap permintaan HTTP tunggal yang dibuat oleh Axios. Jika Anda ingin menimpanya:

Vue.axios.post(
  'http://my.server.com/',
  {
    data: 'some post data'
  },
  {
    withCredentials: false
  })

Sekarang frontend dan backend Anda akhirnya akan bermain bersama dengan baik, dan backend Anda akan mengenali klien setiap kali terhubung.

How to destroy the session?
req.session.destroy();

Begitulah cara Anda keluar dari klien. Jika Anda menggunakan layanan autentikasi pihak ketiga seperti Firebase Authenticate di sisi klien, jangan lupa untuk memanggilnya juga untuk keluar.