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:
|
1 2 3 4 |
cd H:\sourcedev vue create vue-auth-jwt-lumen7 |
Install Dependencies
Selanjutnya dari direktori project kita install dependencies menggunakan perintah berikut:
|
1 2 3 4 5 6 7 8 9 |
cd vue-auth-jwt-lumen7 npm install vue-router npm install vuex npm install vee-validate@2.2.15 npm install axios npm install bootstrap jquery popper.js npm install moment |
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:
|
1 2 3 |
npm run serve --watch |
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:
Login
Pilih menu Login kemudian coba login menggunakan user yang sudah di register pada langkah sebelumnya seperti berikut:
Jika berhasil login maka akan tampil menu Profile seperti berikut:
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:
