How to disable assess to login page once login is completed - node.js

Question

How can i block access to the pages once login has been completed in VueJS.
Also how can i display my server validation errors using bootstrap invalid-feedback class?
Please comment if you have any questions regarding my code or want me to clarify anything more in-depth.
<template>
<div>
<div class="h-100 bg-plum-plate bg-animation">
<div class="d-flex h-100 justify-content-center align-items-center">
<b-col md="8" class="mx-auto app-login-box">
<div class="app-logo-inverse mx-auto mb-3"/>
<div class="modal-dialog w-100 mx-auto">
<div class="modal-content">
<div class="modal-body">
<div class="h5 modal-title text-center">
<h4 class="mt-2">
<div>Welcome back,</div>
<span>Please sign in to your account below.</span>
</h4>
</div>
<b-form-group id="Admin Email" label-for="Admin Email">
<b-form-input
id="Admin Email"
type="email"
required
placeholder="Enter email..."
v-model="email">
</b-form-input>
<div class="invalid-feedback">
{{errorMsg}}
</div>
</b-form-group>
<b-form-group
id="Admin Password"
label-for="Admin Password"
>
<b-form-input
id="Admin password"
type="password"
required
placeholder="Enter password..."
v-model="password"
></b-form-input>
<div class="invalid-feedback">
{{errorMsg}}
</div>
</b-form-group>
<b-form-checkbox name="check" id="exampleCheck">
Keep me logged in
</b-form-checkbox>
<div class="divider"/></div>
<div class="modal-footer clearfix">
<div class="float-left">
<a
href="javascript:void(0);"
class="btn-lg btn btn-link"
>
Recover Password</a>
</div>
<div class="float-right">
<b-button variant="primary" size="lg" #click="signin">
Login to Dashboard
</b-button>
</div>
</div>
</div>
</div>
<div class="text-center text-white opacity-8 mt-3"></div>
</div>
</div>
</b-col>
</div>
</div>
</div>
</template>
<script>
import Authentication from '../../services/authenticationService.js'
import {store} from '../../store.js'
export default {
name: 'HelloWorld',
data () {
return {
email: '',
password: '',
store: store.state.login,
errorMsg: '',
stored: store
}
},
methods: {
async signin () {
try{
const login = await Authentication.login({
email: this.email,
password: this.password
})
var secured = login.data.token.split(' ')[1]
sessionStorage.setItem('jwt', login.data.token)
if (sessionStorage.getItem('jwt') != null || sessionStorage.getItem('jwt') == login.data.token)
{
this.stored.isLoggedIn()
this.$router.push('/admin')
} else {
this.$router.push('/admin/login')
}
}
catch(err){
if(err.response){
this.errorMsg = err.response.data.message
}else if(err.request){
this.errorMsg = err.request
}else{
this.errorMsg = err.message
}
this.errorMsg = err;
}
}
}
}
</script>

Answer 1

You can either check in the created hook, or check in the beforeRouteEnter guard.
You could also check this out for a third option which uses beforeEach
Login.vue - Using the created hook
<script>
export default {
created() {
if(/* If logged in */){
this.$router.push('/admin')
}
}
}
</script>
Using beforeRouteEnter
<script>
import { store } from '../../store'
export default {
beforeRouteEnter(to, from, next) {
if(/* Check store if logged in */){
next('/admin')
} else {
next()
}
}
}
</script>