Хранить данные состояния Vuex без vuex-persist

Question

странный вопрос, но я нигде не нахожу ответа.

Я возвращаю данные пользователя из API-вызова в Vuex. Я сохраняю свой пользовательский объект в состоянии Vuex вместе с токеном. (Объект пользователя и токен создаются и отправляются обратно с сервера на Vuex одновременно.)

Все работает отлично, и при инициализации компонента, который я получаю с помощью геттера, имя пользователя и т. Д.

Но когда я обновляюсь, я теряю объект пользователя из состояния. Но я не теряю Знак. Что странно, потому что я создаю их и возвращаю их вместе.

Вопрос в том, как сохранить пользователя в состоянии до выхода из системы?

• Мне не нужно хранить их в localStorage или в cookie, потому что они являются конфиденциальными данными (пользователь). Я просто хочу получить их через геттера из моего магазина. Какой правильный способ сделать это. Так что vuex-persist не вариант ..

Ниже вы видите мой код:

store.js:

state: {
    status: '',
    token: localStorage.getItem('token'),
    user: {}
},
mutations: {
    auth_success(state, { token, user }) {
    state.status = 'success';
    state.token = token;
    state.user = user;
},
actions: {
    login({ commit }, user) {
      return new Promise((resolve, reject) => {
        commit('auth_request');
    axios({
          url: 'http://localhost:8085/login',
      data: user,
      method: 'POST'
        .then((resp) => {
           const token = resp.data.token;
           const user = resp.data.user;

           axios.defaults.headers.common['Authorization'] = token;

           commit('auth_success', { token, user });
         })
         .catch((err) => {
           commit('auth_error');
           localStorage.removeItem('token');
           reject(err);
        });
  }
},
getters: {
 isLoggedIn(state) {
  return state.token;
},
getUser(state){
  return state.user;
}

User.vue:

<template>
  <v-container>
    <v-layout row wrap>
      Welcome {{this.user.fullName}}
    </v-layout>
  </v-container>
</template>
<script>
 export default {
   data: function() {
    return {
    user: {}
   }
  },
   mounted() {
    this.getUser();
  },
 methods: {
    getUser() {
      return (this.user = this.$store.getters.getUser);
    }
 }
}
</script>

Подводя итог: токен остается в Vuex, данные пользователя - нет. Как сохранить их в состоянии без локального хранилища или файлов cookie?

Любая помощь будет принята с благодарностью!

Answer 1

По сути, как упоминал Sang Đặng, если вы хотите, чтобы пользовательские данные были в вашем vuex (без их хранения на стороне пользователя), вам нужно извлекать их после каждого обновления . Обновление страницы означает, что все приложение Vue (и ваше состояние Vuex) удаляется из памяти (браузера пользователя), что приводит к потере данных текущего хранилища. token также удаляется из памяти, но вы загружаете его при инициализации вашего магазина:

state: {
  token: localStorage.getItem('token'),
  ...
}

Из-за этого вы видите, что token «хранится» в хранилище, а другие пользовательские данные - нет. Есть много способов получить пользовательские данные после обновления - как упомянуто beforeRouteEnter. В основном, если вы хотите получить их при загрузке приложения, вы можете, например, использовать Vue.created hook. Вы также можете использовать отложенную загрузку в своем методе getUser - если нет пользовательских данных - получить их из вашего API. Здесь вы можете прочитать больше о шаблонах аутентификации в SPA - например, используя OAuth.