Question

我使用以下代码在Vue.js应用中使用Amazon Cognito对用户进行身份验证：

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.将应用程序阻塞在mount（）中，直到身份验证完成。 2.让所有请求都等待完成事件。

JavaScript怎么样？

要实现我尝试过的第一种情况

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

将其他用户重定向到包含警告的应用

禁止在mount（）中使用该应用，直到用户通过身份验证为止

1 个答案: