Как сохранить сеанс пользователя Cognito в Vue - PullRequest
Новая
       5

Как сохранить сеанс пользователя Cognito в Vue

1 голос
/ 23 января 2020

Во время обучения Vue я вошел в глубокий конец и попал в небольшой рассол ...

Я пытаюсь использовать AWS Cognito пулы пользователей для аутентификации сессий моего приложения. До сих пор мне удалось создать Userpool (в Cognito), создать пользовательские компоненты входа / выхода в моем приложении Vue и успешно войти и выйти. Весь процесс входа в систему создает несколько (около 10) пар ключ / значение в браузерах localStorage, и именно здесь я борюсь.

Мне нужно getItem из localStorage и сохраните его в Vuex, чтобы при выполнении refre sh я мог получить токен из состояния и setItem обратно в localStorage.

Все это звучит ужасно легко, хотя в настоящее время я нахожусь в процессе обучения Vue, Vuex и AWS сервисам одновременно, что добавляет уровень "морганий" к моей пани c.

Мой текущий метод @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));
},

1 Ответ

0 голосов
/ 14 апреля 2020

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

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

который вызывает "вход в систему" в вашем магазине, который пытается использовать службы авторизации Amplify (не забудьте импортировать их с помощью 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
    }

...
...