Блокируйте приложение в mount (), пока пользователь не будет аутентифицирован с помощью Amazon Cognito и Vue.

Question

Я аутентифицирую пользователя с помощью Amazon Cognito в приложении Vue.js со следующим кодом:

export default new Vue({
    mounted() {
    store.dispatch('authenticateUser', { email: 'username', password: 'password' }).then(() => {
        if (store.state.cognito.authenticated) {
        // Add authentication token to each request
        axios.interceptors.request.use(async config => {
            const response = await store.dispatch('getUserSession');
            if (response && response.accessToken && response.accessToken.jwtToken) {
            config.headers.AccessToken = response.accessToken.jwtToken;
            }
            return config;
        });
        } else {
        this.flashError('AWS user is not authenticated.');
        }
    }).catch((err) => {
        this.flashError(`AWS authentication error: ${err.message}`);
    });
    },
}).$mount('#app');

Сначала я запускаю асинхронное authenticateUser действие и когдавсе готово Я настроил axios таким образом, что все запросы axios автоматически отправляют информацию аутентификации на сервер.

Единственное, что я еще не выяснилзаключается в том, как заставить все запросы axios в приложении ожидать завершения асинхронной аутентификации.(Например, главная страница приложения может запускать axios запрос на заполнение своих данных, когда асинхронная аутентификация все еще выполняется, поэтому должен быть какой-то механизм, который заставит ее ждать).

InВ других языках (например, C ++ или C #) есть две альтернативы: 1. заблокировать приложение в mount () до завершения аутентификации.2. заставьте все запросы ждать события завершения.

как насчет JavaScript?

Для реализации 1-го сценария я пробовал

await store.dispatch('authenticateUser', { email: 'username', password: 'password' }).then(() => {

, но это не компилируется,

EDIT1: Является ли store.dispatch действительно асинхронным?

EDIT2: Я пытался добавить 'async' в mount ().Это шаг в правильном направлении?

async mounted() {
  await store.dispatch('authenticateUser', { email: 'username', password: 'password' }).then(() => {
  ....
},

Answer 1

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

   import Vue from 'vue';
    import VueRouter from 'vue-router';
    import Vuetify from 'vuetify';
    import Vuex from 'vuex';
    import axios from 'axios';
    import VueAxios from 'vue-axios';
    import store from './index'
    Vue.use(Vuetify);
    Vue.use(VueRouter);
    Vue.use(Vuex);
    Vue.use(VueAxios, axios);

     var myapp=null;

  store.dispatch('authenticateUser', { email: 'username', password: 'password' }).then(() => {
    if (store.state.cognito.authenticated) {
    // Add authentication token to each request
    axios.interceptors.request.use(async config => {
        const response = await store.dispatch('getUserSession');
        if (response && response.accessToken && response.accessToken.jwtToken) {
        config.headers.AccessToken = response.accessToken.jwtToken;
         myapp=new Vue({}).$mount('#app');//the right app
        }
        return config;
    });
    } else {
    this.flashError('AWS user is not authenticated.');
     myapp=new Vue({}).$mount('#app');//app that contains warnings
    }
}).catch((err) => {
    this.flashError(`AWS authentication error: ${err.message}`);
    myapp=new Vue({}).$mount('#app');//app that contains warnings
});

поэтому, если ответ в порядке, вы создадите Vue экземпляр с нужным содержимым

 myapp=new Vue({}).$mount('#app');

, иначе перенаправьте этого пользователя в приложение, содержащее предупреждения