Vuejs обнаружить изменения и обновить страницу без участия пользователя

Question

У меня есть одностраничное приложение VueJS (SPA), и когда пользователи успешно регистрируются в моем приложении, оно перенаправляет их на домашнюю страницу. На этой домашней странице отображается панель (предупреждение), в которой пользователям предлагается подтвердить адрес электронной почты, который они указали при регистрации. Примечание : этот бар нам будет постоянно показываться, пока они его не подтвердят!

В настоящее время, когда пользователь подтверждает электронную почту, он открывает страницу подтверждения в новой вкладке, сообщая, что Email have been successfully confirmed!, и панель исчезает, но когда пользователь переходит на исходную вкладку (Домашняя страница), панель все равно отображается.

Можно ли каким-либо образом прослушать фоновое изображение для изменения состояния пользователя (user.isVerified) и скрыть панель без участия пользователя (refre sh страница / клик по любым ссылкам)?

Для получения данных пользователя я использую вызов API:

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 ответ:

{
    "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 страница:

<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

Для ясности, когда вы говорите «прослушивать состояние» - каждый экземпляр Vue имеет свое собственное состояние, поэтому ваш веб-сайт, открытый в другой вкладке, естественно, не разделяет состояние с исходной вкладкой. Похоже, вы хотите, чтобы ваше приложение Vue прослушивало изменения в вашей базе данных, чтобы вы могли определить, когда ваш API пометил вашего пользователя как «подтвержденного». Это отличная возможность для Websockets .

По сути, ваше приложение имеет «слушатель» для сообщения «подтверждено пользователем». Когда ваш API подтверждает пользователя, он отправляет сообщение. Когда слушатель получает это сообщение, он обновляет подтверждение пользователя в состоянии и обновляет (или, лучше, повторно запрашивает пользователя у API). Это та же технология, которая поддерживает уведомления pu, 1008 *, приложения чата и т. Д. c.

Answer 2

Вы должны установить user.isVerified = true где-нибудь в компоненте конформации, например, в хуке mounted:

ConformationPage. vue

mounted () {
  this.user.isVerified = true
},

Если объект "пользователь" сохраняется в хранилище Vuex, а затем отправляет или фиксирует изменение в хранилище:

ConformationPage. vue

mounted () {
  this.$store.commit('userIsVerified', true)
}

store. js

mutations: {
  userIsVerified (state, value) {
    state.user.isVerified = value
  }
}  

Имейте в виду, что если этот компонент ConformationPage.vue является страницей (маршрутом), а не просто компонентом, убедитесь, что пользователи не могут просто проверить себя, просто посетив эту страницу, даже не получив письмо.

А также сделайте убедитесь, что вы лениво загружаете этот компонент, потому что в противном случае он может быть визуализирован, когда пользователь откроет веб-сайт, который немедленно проверит их.

Answer 3

tldr; Это работа для Websockets.

Длинный ответ ниже

Зачем вам нужны Websockets?

Идея заключается в том, что ваше приложение должно знать, действительно ли пользователь имеет подтвердил свою электронную почту. И для того, чтобы он был успешно подтвержден, он должен получить доступ к внутреннему серверу, который подключается к вашей user базе данных.

Итак, теперь вам нужен ваш внутренний сервер для обновления данных в приложении внешнего интерфейса, верно? Ага! Если вы можете ответить на этот вопрос, вы уже на полпути.

Однако это то, чего не может сделать ваше приложение. Для примера в этом вопросе прямо сейчас вы использовали axios, который использует HTTP-протокол , чтобы запросить данные у внутреннего сервера.

Так что же с протоколом HTTP?

Проблема с протоколом HTTP заключается в том, что он позволяет запрашивать только один путь к внутреннему серверу. Таким образом, ваше взаимодействие только ЗАПРОС и ОТВЕТ. Хорошо, и что? Разве это не хорошо? Я могу сделать что-то вроде setInterval, пока не получу response, который я хотел, верно? Ну, это была моя мысль, и технически вы могли бы.

Однако, это плохая практика , и вы даже не должны думать об этом.

Хорошо, так как я узнаю, когда база данных обновляется?

Вот тут и появляется Websocket. Интерпретация MDN Websocket

API WebSocket является передовой технологией, которая позволяет открывать двусторонний сеанс интерактивной связи между браузером пользователя и сервером. С помощью этого API вы можете отправлять сообщения на сервер и получать управляемые событиями ответы без необходимости опросить сервер на предмет ответа.

Проще говоря, он позволяет вашему внутреннему серверу общаться с вашим веб-приложением. Нужно ли заменять мой HTTP-сервер? Нет, WebSocket на самом деле создан для того, чтобы быть вместе с HTTP, действуя так, как будто он является своего рода расширением HTTP-протокола.

Теперь я бы сказал, что здесь трудная работа. Чтобы узнать о веб-сокете и создать внутренний сервер, который поддерживает ваши потребности. Кроме того, ваше веб-приложение также должно адаптироваться для использования WebSocket.

Если вы действительно заинтересованы в получении некоторых живых данных и не заинтересованы (или не имеете времени) для создания внутреннего сервера, вы следует проверить Firebase. Это бесплатно, и вы можете повеселиться с ним.

Я надеюсь, что это поможет вам начать. Спасибо!