Authentication JWT Vue Lumen 7

Authentication JWT Vue Lumen 7 – Pada artikel kali ini kita akan belajar membuat Front End Authentication menggunakan JWT (JSON Web Token) menggunakan Vue JS.

Untuk Back End kita menggunakan Lumen 7. Anda bisa melihat pada artikel sebelumnya disini.

Authentication JWT Lumen 7

 

Authentication JWT Vue Lumen 7

Create Project

Buat project baru dengan nama vue-auth-jwt-lumen7.
Dari command prompt ketikkan perintah berikut:

Gbr1 Authentication JWT Vue Lumen 7 - Vue CLI Option
Gbr1 Authentication JWT Vue Lumen 7 – Vue CLI Option

 

Install Dependencies

Selanjutnya dari direktori project kita install dependencies menggunakan perintah berikut:

Lalu buka file main.js pada direktori src kemudian edit menjadi seperti berikut:

Simpan file main.js

 

Services

Buat folder baru dengan nama services pada direktori src.

auth.service.js

Buat file baru dengan nama auth.service.js pada folder src/services kemudian ketikkan script berikut:

Simpan file auth.service.js

 

auth-header.js

Buat file baru dengan nama auth-header.js pada folder src/services kemudian ketikkan script berikut:

Simpan file auth-header.js

 

user.service.js

Buat file baru dengan nama user.service.js pada folder src/services kemudian ketikkan script berikut:

Simpan file user.service.js

 

Vuex Authentication module

Buat folder baru dengan nama store pada direktori src.

index.js

Buat file baru dengan nama index.js pada folder src/store kemudian ketikkan script berikut:

Simpan file index.js

 

auth.module.js

Buat file baru dengan nama auth.module.js pada folder src/store kemudian ketikkan script berikut:

Simpan file auth.module.js

 

Model

Buat folder baru dengan nama models pada direktori src.

user.js

Buat file baru dengan nama user.js pada folder src/models kemudian ketikkan script berikut:

Simpan file user.js

 

Views

Buat folder baru dengan nama views pada direktori src.

Register.vue

Buat file baru dengan nama Register.vue pada folder src/views kemudian ketikkan script berikut:

Simpan file Register.vue

 

Login.vue

Buat file baru dengan nama Login.vue pada folder src/views kemudian ketikkan script berikut:

Simpan file Login.vue

 

Profile.vue

Buat file baru dengan nama Profile.vue pada folder src/views kemudian ketikkan script berikut:

Simpan file Profile.vue

 

Home.vue

Buat file baru dengan nama Home.vue pada folder src/views kemudian ketikkan script berikut:

Simpan file Home.vue

 

Routes

router.js

Buat file baru dengan nama router.js pada folder src kemudian ketikkan script berikut:

Simpan file router.js

Selanjutnya kita buat navigasi menu dari routes yang sudah kita buat, ke dalam file App.vue.

Buka file App.vue pada direktori src kemudian edit menjadi seperti berikut:

Simpan file App.vue

 

Testing

Jalankan Vue.js dengan menggunakan perintah berikut:

Kemudian buka browser dan ketikkan URL http://localhost:8080

Note: Jangan lupa untuk menjalankan Back End Server.

 

Registrasi

Pilih menu Register kemudian coba inputkan data user baru seperti berikut:

Gbr2 Authentication JWT Vue Lumen 7 – Register
Gbr2 Authentication JWT Vue Lumen 7 – Register

 

Login

Pilih menu Login kemudian coba login menggunakan user yang sudah di register pada langkah sebelumnya seperti berikut:

Gbr3 Authentication JWT Vue Lumen 7 – Login
Gbr3 Authentication JWT Vue Lumen 7 – Login

Jika berhasil login maka akan tampil menu Profile seperti berikut:

Gbr4 Authentication JWT Vue Lumen 7 – Profile
Gbr4 Authentication JWT Vue Lumen 7 – Profile

Sampai disini kita sudah berhasil membuat Authentication JSON Web Token menggunakan Vue dan Lumen 7. Pada artikel selanjutnya kita akan bahas VueJS dan Lumen lebih jauh lagi.

Semoga bermanfaat.

Source Code bisa anda download disini:

Dewaweb Gives Your Website Only the Best!

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *