How can user input validation be implemented before redirecting to the dashboard? The code provided below:
The code below is currently loading the dashboard first, but it should display the login page first. After validation, it should redirect to the dashboard page.
Please refer to the following link to download the project. I am using this template for my project, but it does not include login validation:
// app.vue
<template>
<div>
<notifications></notifications>
<router-view :key="$route.fullPath"></router-view>
</div>
</template>
<script>
export default {
methods: {
disableRTL() {
if (!this.$rtl.isRTL) {
this.$rtl.disableRTL();
}
},
toggleNavOpen() {
let root = document.getElementsByTagName('html')[0];
root.classList.toggle('nav-open');
}
},
mounted() {
this.$watch('$route', this.disableRTL, { immediate: true });
this.$watch('$sidebar.showSidebar', this.toggleNavOpen)
}
};
</script>
<style lang="scss"></style>
//route.js
import DashboardLayout from
"@/layout/dashboard/DashboardLayout.vue";
import LoginComponent from "@/layout/dashboard/login.vue"
import NotFound from "@/pages/NotFoundPage.vue";
// Admin pages
const Dashboard = () => import(/* webpackChunkName: "dashboard"
*/"@/pages/Dashboard.vue");
const pole = () => import(/* webpackChunkName: "common" */
"@/pages/Poles.vue");
const routes = [
{
path: "/",
component: DashboardLayout,
redirect: "/dashboard",
children: [
{
path: "dashboard",
name: "dashboard",
component: Dashboard
},
{
path: "Poles",
name: "Poles",
component: pole
}
]
},
{ path: "*", component: NotFound },
];
export default routes;
//login.vue
<template>
<div class="login-wrapper border border-light">
<div class="form-signin">
<h2 >Please sign in</h2>
<input type="text" name="username" v-model="input.username"
placeholder="Username" class="form-control" required
autofocus>
<input type="password" name="password" v-model="input.password"
placeholder="Password" class="form-control" required>
<button class="btn btn-lg btn-primary btn-block"v-
on:click="login()">Login</button>
</div>
</div>
</template>
<script>
export default {
name: 'login',
data() {
return {
input: {
username: "",
password: ""
}
}
},
methods: {
login() {
if(this.input.username != "" && this.input.password !=
"") {
if(this.input.username == "admin" &&
this.input.password =="admin") {
this.$router.push('DashboardLayout');
} else {
alert("The username and / or password is
incorrect");
}
} else {
console.log("A username and password must be
present");
}
}
}
};
</script>