Vuejs detect the change and update the page without user's involvement - vuejs2

Question

I've got the VueJS single page application (SPA) and when users successfully register in my app it redirects them to the Home page. This Home page shows a bar (alert) asking users to confirm the email they have provided during the registration. Note: this bar will we be constantly shown until they confirm it!
Currently when a user confirms the email it opens the confirmation page in a new tab saying that Email have been successfully confirmed! and the bar disappears but when user goes to the original tab (Home page) the bar is still shown.
Is there any way you could listen on the background for a change of the user's state (user.isVerified) and hide the bar without user's involvement (refresh the page/click on any links)?
To get the user's data I'm using an API call:
getUser({ commit }) {
return new Promise((resolve, reject) => {
axios
.get('http://localhost:8000/api/user')
.then(response => {
commit('setData', response.data.data);
resolve(response);
})
.catch(errors => {
reject(errors.response);
})
})
}
JSON response:
{
"data": {
"id": 2,
"name": "John Doe",
"email": "john#email.com",
"isVerified": true,
"createdAt": "2020-04-17T13:17:07.000000Z",
"updatedAt": "2020-04-26T23:15:24.000000Z"
}
}
Vue page:
<template>
<v-content>
<v-alert
v-if="user.isVerified === false"
tile
dense
color="warning"
dark
border="left"
>
<div class="text-center">
<span>
Hey {{ user.name }}! We need you to confirm your email address.
</span>
</div>
</v-alert>
<v-content>
<router-view></router-view>
</v-content>
</v-content>
</template>

Answer 1

To be clear, when you say "listen for state" - each Vue instance has its own state, so your website open in another tab does not naturally share state with the original tab. It sounds like you want your Vue app to listen for changes in your database, so that you can tell when your API has marked your user as 'confirmed'. This is a great opportunity for Websockets.
Essentially, your app has a 'listener' for a 'user confirmed' message. When your API confirms a user, it sends the message. When the listener receives that message, it updates the user confirmation in state and refreshes (or, better, re-requests the user from the API). This is the same technology that powers push notifications, chat apps, etc.

Answer 2

You have to set user.isVerified = true somewhere in the conformation component, e.g. in the mounted hook:
ConformationPage.vue
mounted () {
this.user.isVerified = true
},
If the "user" object is stored in Vuex store, then dispatch or commit change to the store instead:
ConformationPage.vue
mounted () {
this.$store.commit('userIsVerified', true)
}
store.js
mutations: {
userIsVerified (state, value) {
state.user.isVerified = value
}
}
Keep in mind, if that ConformationPage.vue component is a page (route) and not just a component, make sure that users cannot just verify themselves simply by visiting that page before even getting the email.
And also make sure you lazy-load that component, because otherwise it might be rendered when the user opens the website, which will immidiatelly verify them.

Answer 3

tldr;
This is the job for Websockets.
Long answer below
Why do you need Websockets?
The idea behind it is that your application needs to know whether the user has truly confirmed his email. And for it to be successfully confirmed it has to access the backend server which connects to your user database.
So now, you need your backend server to update the data in the frontend application right? Yup! If you are able to answer this, you already halfway through.
However, this is what your frontend application can't do. For the example in the question right now you used axios which uses HTTP Protocol to ask the backend server for data.
So what's up with the HTTP Protocol?
The problem with HTTP Protocol is that it only allows you to request one way to the back end server. So your interaction is only REQUEST and RESPONSE. Ok, so what? Isn't it fine? I can do some sort of setInterval until I get the response I wanted right? Well, that was my thought and technically you could.
However, it's a bad practice and you shouldn't even think about it.
Ok, so how do I know when the database is updated?
This is where the Websocket comes in.
MDN interpretation of Websocket
The WebSocket API is an advanced technology that makes it possible to open a two-way interactive communication session between the user's browser and a server. With this API, you can send messages to a server and receive event-driven responses without having to poll the server for a reply.
In a simple way, it allows your backend server to talk to your frontend application. Do I need to replace my HTTP backend server? No, WebSocket is actually made to be together with HTTP, act like it was some sort of an extension to HTTP Protocol.
Now I would say, this is where the job is hard. To learn about websocket, and create a backend server that supports your needs. Also, your frontend application has to adapt to use WebSocket as well.
If you're really interested in getting some live data and is not interested (or doesn't have time) to create a backend server, you should check out Firebase. It's free, and you can have fun with it.
I hope that can help you get started. Thank you!