Vue에서 cognito 사용자 세션을 유지하는 방법

Vue에서 cognito 사용자 세션을 유지하는 방법

Vue를 배우는 동안, 나는 깊은 곳에 들어가서 약간의 피클을...

AWS Cognito 사용자 풀을 사용하여 앱의 세션을 인증하려고 합니다.지금까지 Cognito에서 Userpool을 만들고 Vue 앱 내에서 커스텀 로그인/아웃 컴포넌트를 생성하여 로그인과 로그아웃에 성공했습니다.로그인 프로세스 전체를 통해 브라우저 localStorage에 몇 개의 키/값 쌍이 생성되며, 이 부분에서 어려움을 겪고 있습니다.

localStorage에서Item을 가져와 Vuex에 저장해야 합니다.이것에 의해, 리프레시시에 스테이트로부터 토큰을 취득해, localStorage로 setItem

Vue, Vuex 및 AWS 서비스를 동시에 배우고 있는 중이지만, 이 모든 것이 매우 쉬운 것처럼 들립니다.그 때문에, 제 공황에 「깜짝깜짝」이 되고 있습니다.

현재 사용하고 있는 @click 방식은 다음과 같습니다.

signIn: function() {
    Auth.signIn(this.formResponses.username, this.formResponses.password)
        .then(user => {
            console.log(user);
            this.$store.state.signedIn = !!user;
            this.$store.state.user = user;
            this.signedIn = true;
            this.$store.state.token = user.signInUserSession.idToken.jwtToken;
            // this.currentUserInfo();
        })
        .catch(err => console.log(err));
},

인증 워크플로우를 추가하는 방법을 확인하는 것이 좋습니다만, 그 요점은 사용자가 로그인을 시도하면 액션을 디스패치하는 것입니다.

async login(){
try{
await this.$store.dispatch('login', {formWithEmailAndPassword})
} catch(error){
console.log({error})
}

Amplify's Auth 서비스를 사용하려고 하는 스토어에서 "로그인"을 호출합니다(이 서비스를 Import하는 것을 잊으십시오).import {Auth} from 'aws-amplify):

export const actions = {
    async login({commit}, {email, password}){
    const user = await Auth.signIn(email, password)
    commit('set', user)
    return user
    }
...

실제로 "set"을 통해 사용자를 설정합니다.

export const mutations = {

    set(state,user){
    state.user = user
    }

...

언급URL : https://stackoverflow.com/questions/59884105/how-to-persist-cognito-user-session-in-vue