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钩子。您也可以在getUser方法中使用延迟加载-如果没有用户数据，则可以从API中获取它们。 Here，您可以阅读有关SPA中身份验证模式的更多信息，例如使用OAuth。

保留vuex状态数据而无需vuex-persist

1 个答案: