javascript - 在 mounted() 中阻止应用程序，直到使用 Amazon cognito 和 Vue.js 对用户进行身份验证

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 请求以填充其数据，因此应该有某种机制使其等待)。

在其他语言(例如 C++ 或 C#)中，有两种选择: 1. 在 mounted() 中阻止应用程序，直到身份验证完成。 2. 让所有请求等待完成事件。

JavaScript 呢？

为了实现我尝试过的第一个场景

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

但这不编译。

EDIT1: store.dispatch 真的是异步的吗？

EDIT2: 我尝试将“async”添加到 mounted()。这是朝着正确方向迈出的一步吗？

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');

否则将该用户重定向到包含警告的应用