This is a simple Login Vue form.
This will consume the Laravel Endpoints
https://github.com/jdevstatic/laravel-test-crud
Download Node.js
and select npm
.
Install Vue CLI too,
npm install -g @vue/cli`
and axios
npm install axios --save
You can download this as a zip file, then extract. Then open cmd and change directory to the target project
then
npm install
then
npm run serve
The index.js
inside the router folder will route the pages.
as you can see from the code below, there are the paths to that
{
path: '/login',
name: 'Login',
component: function() {
return import( /* webpackChunkName: "about" */ '../views/Login.vue')
}
}
now here is the one I've made to actually route them in different pages, for example, logging as admin or regular user
{
path: '/admin',
name: '200',
component: function() {
return import( /* webpackChunkName: "about" */ '../views/Admin.vue')
}
as you can see the name 200
, which is the state returned from
POST response coming from the endpoint of
http://localhost:8000/api/authenticate
this is the complete code,
import Vue from 'vue'
import VueRouter from 'vue-router'
//import Home from '../views/Home.vue'
import LoginComponent from "../views/Login.vue"
import SecureComponent from "../views/User.vue"
//import 200Component from "../views/200.vue"
Vue.use(VueRouter)
const routes = [{
path: '/',
redirect: {
name: "Login"
}
},
{
path: '/about',
name: 'About',
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
//component: function () {
//return import(/* webpackChunkName: "about" */ '../views/About.vue')
//}
},
{
path: '/user',
name: '201',
component: function() {
return import( /* webpackChunkName: "about" */ '../views/User.vue')
}
},
{
path: '/admin',
name: '200',
component: function() {
return import( /* webpackChunkName: "about" */ '../views/Admin.vue')
}
},
{
path: '/error',
name: 'Error',
component: function() {
return import( /* webpackChunkName: "about" */ '../views/Error.vue')
}
},
{
path: '/login',
name: 'Login',
component: function() {
return import( /* webpackChunkName: "about" */ '../views/Login.vue')
}
}
]
const router = new VueRouter({
mode: 'history',
base: process.env.BASE_URL,
routes
})
export default router
The views
folder is what we see on the browser, to interact with
in our case here, it's the login form.
The login view is the form and it will get the username
and password
and will
be sent as POST through axios
, then it should receive the response,
one of my highlight here is the response code, 200 for admin, 201 for users, and 404 for unsuccessful attempts
Login.vue
<template>
<div id="login">
<h1>Login</h1>
<input type="text" name="username" v-model="input.username" placeholder="Username" />
<input type="password" name="password" v-model="input.password" placeholder="Password" />
<button type="button" v-on:click="login()">Login</button>
</div>
</template>
<script>
import axios from "axios";
export default {
name: 'Login',
data() {
return {
ip: "",
input: {
username: "",
password: ""
},
response: "",
//postBody: "",
//errors: []
}
},
methods: {
login() {
axios({
method: "POST",
"url": "http://127.0.0.1:8000/api/authenticate",
"data": this.input,
"headers": {
"content-type": "application/json"
}
}).then(result => {
this.response = result.data;
console.log(result.status);
//obj2 = JSON.stringify(result.data)
//obj3 = JSON.parse(obj2)
//JSON.parse(JSON.stringify(result.data))
this.$router.replace({
name: result.status
});
}, error => {
//console.error(error);
this.$router.replace({
name: "Error"
});
});
//axios.post(`https://apimocha.com/jdevstatic/example/3`, {
// body: this.postBody
//})
//.then(response => {})
//.catch(e => {
// this.errors.push(e)
//})
//this.$router.push({path: "/api/cruds" });
//window.location.href = "http://127.0.0.1:8000/api/authenticate"
//console.log(result.data);
//axios({
// method: "post",
// url: "https://apimocha.com/jdevstatic/example",
// data: this.input,
// headers: { "Content-Type": "multipart/form-data" },
//})
//.then(function (response) {
//handle success
//console.log(response);
//})
//.catch(function (response) {
//handle error
//console.log(response);
//});
//console.log(this.input);
//if(this.input.username != "" && this.input.password != "") {
//if(this.input.username == this.$parent.mockAccount.username && this.input.password == this.$parent.mockAccount.password) {
//this.$emit("authenticated", true);
//this.$router.replace({ name: "Secure" });
//} else {
//console.log("The username and / or password is incorrect");
//}
//} else {
//console.log("A username and password must be present");
//}
}
}
}
</script>
<style scoped>
#login {
width: 500px;
border: 1px solid #CCCCCC;
background-color: #FFFFFF;
margin: auto;
margin-top: 200px;
padding: 20px;
}
</style>