Security Vue Input Type Password Change Type Text

 Security Vue Input Type Password Change Type Text  - Hari ini saya akan menjelaskan tentang keamanan pada sebuah aplikasi website berbasis library vue, Kita tahu bahwa sebuah halaman login ketika kita menginputkan sebuah informasi terkait dengan secure data seperti informasi password atau kata sandi. Pastinya inputan didalam sebuah halaman html akan menampilkan sebuah code bintang *.

Kode bintang tersebut akan hilang, ketika kita mencoba untuk mengubah dibagian inspect halaman dengan mengganti type password pada template input ke type text, sehingga password yang tadinya diinputkan akan berubah ke bentuk informasi password. 

Seperti contoh pada gambar diatas, Disini saya akan memberikan tips dan trik bagaimana caranya agar hal ini tidak terjadi. ini bisa dijadikan sebagai keamanan. Jadi bagi kamu ingin tahu dan pakai trik ini sebagai sumber keamanan. Langsung simak aja 

1. Pertama kamu buatlah sebuah variabel data 

password: "",

password_blur: "",

2. Buatlah dibagian function computed pada vue, langsung saja copykan code dibawah ini

 v_password_computed: {

      get() {

        return this.password_blur;

      },

      set(val) {

        let hruf = "";

        let dt_blur = "";

        let data_real = this.password.slice(0, val.length);

        data_real = data_real.split("");

        for (let i = 0; i < val.length; i++) {

          hruf = val.charAt(i);

          if (hruf != "*") {

            data_real[i] = hruf;

          }

          dt_blur += "*";

        }

        this.password_blur = dt_blur;

        this.password = data_real.join("");

      },

    },

3. buatlah inputan data dengan type password, dan kasih v-modelnya adalah v_password_computed

 <div class="form-group auth-form-group-custom mb-4">

                        <input

                          type="password"

                          v-model="v_password_computed"

                          name="text"

                          class="input1"

                          style="width: 100%"

                          placeholder="Password"

                        />

                      </div>

Cara kerja dari code tersebut adalah setiap password yang diinputkan, maka data tersebut setiap karakternya akan di simpan divariabel berbeda, dan nilai tersebut akan direplace kedalam bentuk * dan disimpan ke dalam variabel password_blur. Yang ditampilkan di web nanti adalah password_blur dan password aslinya tetap disimpan di varibel password. Untuk kamu mau menggunakan password tersebut untuk pengiriman data maka gunakan yang variabel password. Contoh hasil dari code diatas adalah sebagai berikut :