vue长时间存储用户信息

最新推荐文章于 2024-12-20 08:43:12 发布

是皮皮虾啊

最新推荐文章于 2024-12-20 08:43:12 发布

阅读量1.8k

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/weixin_39223685/article/details/127714999

版权

在Vue应用中，通常将用户信息存储在Vuex中，但刷新页面会导致数据丢失。为解决此问题，可以采取两种策略：1) 在登录时将用户信息存储在本地，页面加载时从本地获取；2) 使用路由守卫，在用户信息为空时调用接口获取。本地存储结合Vuex，确保页面刷新后用户信息依然可用。另一种方法是通过Vuex的actions设置用户数据，并在路由守卫中检查并获取用户信息。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一般来说我们的用户信息都存在vuex里面，但是页面每次刷新都会把vuex里面的数据清空，这样我们页面上的头像，用户信息就没有了。解决这个问题有两种方法，一是我们把用户信息存一份在本地，没有的时候就去本地拿，二是通过路由导航守卫，如果用户信息为空就再调用接口去获取

第一种：
在登录的时候把获取到的用户信息setUser()方法存一份在本地，存一份在vuex里面。
本地存储：setUser(JSON.stringify(res.data))
vuex存储：this.$store.commit("SET_USER", res.data);
"SET_USER"是vuex里面修改user的方法，res.data是你要存的数据。
把vuex里面的数据和本地数据整合，当页面刷新的时候使用getUser()方法从本地去拿去数据。
在页面要使用vuex里面的用户信息数据的话就直接 this.$store.state.user 去拿就行了，

import Vue from 'vue'
import Vuex from 'vuex'
import {
    getUser
} from "@/utils/auth.js"
 
Vue.use(Vuex)
 
export default new Vuex.Store({
    state: {
        token: "",
        user: ''|| JSON.parse(getUser()),
    },
    mutations: {
        SET_TOKEN: (state, token) => {
            state.token = token
        },
        SET_USER(state, user) {
            state.user = user
        },
    },
    actions: {},
    getters: {
        user: state => state.user
    }
})

第二种：
在vuex的actions里面定义一个获取用户数据的方法，通过用户信息接口获取的用户数据，用commit("SET_USERINFO", data) 把数据存在state 里面。

actions:{
    GetInfo({ commit, state }) {
      return new Promise((resolve, reject) => {
        getInfo()
          .then(({ data }) => {
            commit("SET_USERINFO", data);    
            resolve(data);
          })
          .catch((error) => {
            reject(error);
          });
      });
    }
}

在路由守卫里面判断登录状态用户信息为空就用

this.$store.dispatch("GetInfo")再去获取用户信息
router.beforeEach((to, from, next) => {
  if (getToken() && !store.state.user.userInfo.orgId) {
    store.dispatch("GetInfo");
  }
  next();
});