vuejs user logged out if reload page - vue.js

Question

Below is the code that I have in my router/index.js
Vue.use(Router)
let router = new Router({
mode: 'history',
routes: [
{
path: '/',
name: 'HelloWorld',
component: HelloWorld,
meta: {
guest: true
}
},
{
path: "/login",
name: "login",
component: LoginComponent,
meta: {
guest: true
}
},
{
path: "/secure",
name: "secure",
component: SecureComponent,
meta: {
requiresAuth: true
}
},
{
path: "/kelas",
name: "kelas",
component: KelasComponent,
meta: {
requiresAuth: true
}
}
]
})
router.beforeEach((to, from, next) => {
const record = to.matched.some(record => record.meta.requiresAuth);
console.log("record: ")
console.log(record)
if(record) {
console.log(localStorage.getItem('jwtToken'))
if (localStorage.getItem('jwtToken') == null) {
next({
path: '/login',
params: { nextUrl: to.fullPath }
})
} else {
next()
}
} else if(to.matched.some(record => record.meta.guest)) {
if(localStorage.getItem('jwtToken') == null){
next()
}
else{
next()
}
}else {
next()
}
})
export default router
And in my components/Login.vue I have something like below:
<template>
<section id="login">
<h1>Login</h1>
<form #submit="onSubmit">
<b-field label=""
type="is-warning"
message="Please enter a valid email">
<b-input type="email" name="email" v-model="input.email" placeholder="E-mail"></b-input>
</b-field>
<b-field label=""
type="is-warning"
message="Please enter your password">
<b-input type="password" name="password" v-model="input.password" placeholder="Password"></b-input>
</b-field>
<input type="password" name="password" v-model="input.password" placeholder="Password" />-->
<b-field :message="errors"
type="is-danger"
name="errors"
>
<!--<button type="button" v-on:click="login()" class="button">Login</button>-->
<button type="submit" class="button">Login</button>
</b-field>
</form>
</section>
</template>
<script>
import axios from 'axios'
export default {
name: 'Login',
data () {
return {
input: {
email: "",
password: ""
},
result : "",
errors: []
}
},
methods: {
onSubmit (evt) {
evt.preventDefault()
if(this.input.email != "" && this.input.password != "") {
axios.post('http://localhost:8081/api/auth/login', this.input)
.then(response => {
localStorage.setItem('user',JSON.stringify(response.data.user))
localStorage.setItem('jwtToken', response.data.token)
if (localStorage.getItem('jwtToken') != null){
this.$emit("authenticated", true)
this.$emit('loggedIn')
if(this.$route.params.nextUrl != null){
this.$router.push(this.$route.params.nextUrl)
}
else {
this.$router.push('secure')
}
}
})
.catch(e => {
console.log(e.response)
if(e.response.status === 401) {
this.errors.push("Invalid login")
}else{
this.errors.push(e)
}
})
} else {
this.result = "An email and password must be present"
console.log("An email and password must be present")
}
}
}
}
</script>
My codes above works very well. In secure.vue page, I can click a button which opens up kelas.vue page without any problem. But when I tried to refresh the page secure or kelas, it will push me back to page login.
From doing console.log, I can see that the values for jwttoken and to.matched.some(record => record.meta.requiresAuth); are still there; the only difference is when I do a reload, the from at this line router.beforeEach((to, from, next) => { becomes null.
Is there any way I can make the user to be still logged in after the user do a page reload/refresh? It seems that the 'default' behavior for vue is the user aren't meant to do a page reload/refresh.. or am I missing something here?

Answer 1

My bad.In my app.vue I have the code below which was somehow the culprit that keeps on redirecting me to login on page reload/refresh. Removing the code below fixed my problem.
mounted() {
if(!this.authenticated) {
this.$router.replace({ name: "login" })
}
},
methods: {
setAuthenticated (status) {
this.authenticated = status
},
logout () {
this.authenticated = false
}
}
I guess this is one of the problem when I tried to follow several vue nodejs authentication tutorial at once lol