Handling of user status already exists at login - vue.js

Question

I have a form to sign in and another form to sign up, and I have a store file, and when I enter user data, the data is stored in the local storage and VueX.
And all users are stored in the matrix "user".
And now I want to verify when I'm running a login.
If the user already exists, a message that "he already exists" should appear.
How can I solve the problem?
This is store file, in which a set of functions is written and in it there is a "user" array.
store.js:
import Vue from 'vue'
import Vuex from 'vuex'
const LOGIN = "LOGIN";
const LOGIN_SUCCESS = "LOGIN_SUCCESS";
const LOGOUT = "LOGOUT";
import image1 from '../assets/img/image4.jpg'
import image2 from '../assets/img/image2.jpg'
import image3 from '../assets/img/image3.jpg'
import image4 from '../assets/img/insta2.jpg'
Vue.use(Vuex)
export const store = new Vuex.Store({
state:{
isLoggedIn: !!localStorage.getItem('token'),
user:[
{name:'Hiba',
email:'Hiba69#gmail.com',
password:'123442321325'
}
]
},
mutations:{
createUser(state,payload){
state.user.push(payload)
}
},
},
getters:{
loadedUsers(state){
return state.user.sort((userA,userB)=>{
return userA.id >userB.id
})
},
isLoggedIn: state => {
return state.isLoggedIn
}
}
})
This is the signup file, through which you sign up to the site by entering the user's data.
signup.vue:
<template>
<div>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-img
height="180px"
:src="
'https://cdn.awave.se/wp-content/uploads/sites/3/2019/02/case_greenfood_1new.jpg'
"
></v-img>
<v-card-text>
<v-container>
<form #click="onSignUp">
<v-layout row>
<v-flex xs12>
<v-text-field
name="id"
label="Id"
id="id"
v-model="id"
type="number"
color="#43A047"
required
>
{{ id }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="name"
label="Name"
id="name"
v-model="name"
type="text"
color="#43A047"
required
>
{{ name }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="email"
label="Email"
id="email"
v-model="email"
type="text"
color="#43A047"
required
>
{{ email }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="password"
label="Password"
id="password"
v-model="password"
type="password"
color="#43A047"
required
>
{{ password }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-btn class="green darken-1 color">
Sign up
</v-btn>
</v-flex>
</v-layout>
</form>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</div>
</template>
<script>
export default {
data() {
return {
id: "",
name: "",
email: "",
password: "",
};
},
computed: {
formIsValid() {
return (
this.id !== "" &&
this.name !== "" &&
this.email !== "" &&
this.password !== ""
);
},
},
watch: {
name(newName) {
localStorage.name = newName;
},
},
methods: {
onSignUp() {
if (!this.formIsValid) {
return;
}
const signup = {
name: this.name,
email: this.email,
password: this.password,
};
console.log(signup);
this.$store.commit("createUser", signup);
const stringifiedData = JSON.stringify(signup);
// console.log("S: ", stringifiedData);
localStorage.setItem("signup", stringifiedData);
console.log("We got : ", JSON.parse(localStorage.getItem("signup")));
},
},
};
</script>
<style scoped>
.color {
color: #fafafa;
}
</style>
This is the login file, through which you log in to the site by entering the user's data.
signin.vue:
<template>
<v-container>
<v-layout row>
<v-flex xs12 sm6 offset-sm3>
<v-card>
<v-card-text>
<v-container>
<form #click="onSignIn">
<v-layout row>
<v-flex xs12>
<v-text-field
name="email"
label="Email"
id="email"
v-model="email"
type="text"
color="#43A047"
required
>
{{ email }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-text-field
name="password"
label="Password"
id="password"
v-model="password"
type="password"
color="#43A047"
required
>
{{ password }}
</v-text-field>
</v-flex>
</v-layout>
<v-layout row>
<v-flex xs12>
<v-btn class="green darken-1 color">
Sign In
</v-btn>
</v-flex>
</v-layout>
</form>
</v-container>
</v-card-text>
</v-card>
</v-flex>
</v-layout>
</v-container>
</template>
<script>
export default {
data() {
return {
email: "",
password: "",
};
},
methods: {
onSignIn() {
const signin = {
email: this.email,
password: this.password,
};
console.log(signin);
const stringifiedData = JSON.stringify(signin);
localStorage.setItem("signin", stringifiedData);
console.log("We got : ", JSON.parse(localStorage.getItem("signin")));
},
}
};
</script>
<style scoped>
.color {
color: #fafafa;
}
</style>

Answer 1

You should check if there is an user, when you created the app.
At main.js, you could use something like that;
new Vue({
el: '#app',
router,
store,
render: h => h(App),
created() {
if (localStorage.getItem("user")) {
store.dispatch("autoSignIn", localStorage.getItem("user"));
}
}
And in your vuex store, create autoSignIn method,
autoSignIn({ commit }, payload) {
commit("setLoading", true);
var token = JSON.parse(payload);
var decoded = jwt.verify(token, process.env.VUE_APP_TOKEN);
var loggedUser = {
id: decoded.id,
email: decoded.email
};
commit("setUser", loggedUser);
commit("setLoading", false);
},
And in your signup or login page, if your user state is not null, you can redirect them to the page you want to..
It is better practice to redirect user before rendering the page, so you could use router to check;
{
path: "/login",
beforeEnter: (to, from, next) => {
if (!store.getters.user) {
{
next();
}
} else {
next("/user_secret_page");
}
}
},