I am currently working on a Vue.js application and have successfully implemented authentication functionality, including checking if the user is logged in.
After logging in, I want to fetch some data and store it in localStorage. However, I have encountered an issue where the data stored in localStorage is not reactive. This means that when I land on the dashboard after a successful login, the data (such as userdata) is not accessible unless I click on a route link first.
So my question is, how can I "emulate" or trigger a soft refresh similar to clicking on a link and changing routes upon login?
Below is my login component code, with the localStorage data being set in the auth script.
<template>
<div id="loginInput">
<div class="login-box">
<div class="login-header">
<img src="../assets/images/Logotype.png">
</div>
<div class="login-body">
<div v-show="!forgot">
<h1>Log in</h1>
<form @submit.prevent="login" autocomplete="off">
<input class="form-control" placeholder="Email Address" type="email" v-model="email" />
<input class="form-control" placeholder="Password" type="password" v-model="pass" />
<button class="btn btn-block" type="submit">Login</button>
<p v-if="error" class="error">Bad login information</p>
</form>
</div>
<div v-show="forgot">
<h1>Forgott password</h1>
<input class="form-control" placeholder="Email Address" type="text" v-model="emailForgot" />
<button class="btn btn-block" type="button">Reset password</button>
</div>
</div>
<div class="login-footer">
<a href="#" v-show="!forgot" v-on:click.prevent="forgot = true">Forgot password?</a>
<a href="#" v-show="forgot" v-on:click.prevent="forgot = false">Login</a>
</div>
</div>
</div>
</template>
<script>
import auth from '@/assets/js/auth'
export default {
data() {
return {
email: '',
pass: '',
emailForgot: '',
forgot: false,
error: false,
}
},
methods: {
login () {
auth.login(this.email, this.pass, loggedIn => {
if (!loggedIn) {
this.error = true
} else {
this.$router.replace(this.$route.query.redirect || '/')
}
})
}
}
}
</script>
<style>
.error {
color: red;
}
</style>