Amazon cognito 및 Vue.js를 사용하여 사용자가 인증될 때까지 mounted()에서 앱을 차단합니다.

Amazon cognito 및 Vue.js를 사용하여 사용자가 인증될 때까지 mounted()에서 앱을 차단합니다.

다음 코드로 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');

먼저 async authenticate User 액션을 시작하고 이것이 완료되면 모든 axios 요구가 자동으로 인증 정보를 서버로 전송하는 방식으로 axios를 설정합니다.

유일하게 파악하지 못한 것은 앱 내의 모든 Axios 요청을 비동기 인증 완료까지 대기시키는 방법(예를 들어 메인 앱 페이지에서 Axios 요청을 실행하여 비동기 인증이 진행 중일 때 데이터를 채울 수 있으므로 대기시키는 메커니즘이 있어야 합니다).

다른 언어(예를 들어 C++나 C#)에는 두 가지 대안이 있습니다. 1. 인증이 완료될 때까지 mounted()에서 앱을 차단합니다. 2. 모든 요청을 완료 이벤트를 대기시킵니다.

JavaScript는 어떻습니까?

처음 시도한 시나리오를 구현하기 위해

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

컴파일되지 않습니다.

EDIT1: store.dispatch는 정말 비동기입니까?

EDIT2: mounted()에 'async'를 추가하려고 했습니다.올바른 방향으로 가는 단계입니까?

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

일부 콘텐츠가 포함된 앱이 있으며 인증된 사용자만 액세스할 수 있도록 허용하고 그렇지 않으면 잘못된 사용자를 다른 페이지로 리디렉션할 것입니다. 다음과 같이 하십시오.

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

그렇지 않으면 해당 사용자를 경고가 포함된 앱으로 리디렉션합니다.

언급URL : https://stackoverflow.com/questions/52706836/block-the-app-in-mounted-until-the-user-is-authenticated-using-amazon-cognito