Membuat Halaman Login Socket.io dan Vue.js

Saatnya Anda membuat halaman login yang cukup sederhana, tetapi ini tidak membutuhkan koneksi ke basis data untuk melakukan autentikasi. Jadi saya hanya memanfaatkan localStorage pada web browser untuk menyimpan data yang diperlukan. Alih-alih Anda memasukan nama kemudian login, lihat penjelasannya dibawah ini.

Daftar isi:

1. Skrip berkas login.vue

Salin dan tempelkan skrip dibawah ini pada berkas login.vue yang sudah Anda sebelumnya. Skrip dibawah ini akan membuat halaman login dan hanya membuat satu bidang saja pada form yaitu nama.

<template>
    <div class="columns is-centered">
        <div class="column is-6">
            <form @submit.prevent="submit" method="post">
                <div class="field">
                    <div class="control">
                        <input v-model="name" type="text" class="input" placeholder="masukan nama...">
                    </div>
                </div>
                <div class="field">
                    <button type="submit" class="button is-primary">Masuk</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script>
// skrip-js
</script>

2. Menambahkan skrip-js

Agar skrip tidak penjang saya memotongnya menjadi dua bagian, jadi letakan skrip dibawah ini pada komentar skrip-js pada skrip diatas.

export default {
    data() {
        return {
            name: ''
        }
    },

    methods: {
        submit() {
            localStorage.setItem('name', this.name);
            this.$router.push({
                name: 'chat'
            })
        }
    },

    mounted() {
        if (localStorage.getItem('name')) {
            this.$router.push({
                name: 'chat'
            })
        }
    }
}

Jadi bagaimana cara kerja login?

Sebenarnya cukup mudah, ketika localStorage memiliki variabel name dan nilainya, maka halaman akan diarahkan ke halaman login. Hal itu dilakukan pada proses perintah if pada properti mounted(), berarti jika Anda sudah login maka halaman login akan mengarahkan ke halaman chat.

Hasil gambar login:

hasil