VUE框架中登陆后刷新用户丢失问题

最新推荐文章于 2023-02-12 10:57:56 发布

原创

最新推荐文章于 2023-02-12 10:57:56 发布 · 577 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

在Vue项目中遇到登录后刷新导致用户信息丢失的问题，通过检查发现未正确使用存储的值。解决方法包括在store的getter中处理，以及在登录后组件中正确调用和赋值。

VUE框架中登陆后刷新用户丢失问题

之前用vue写了拦截器，但一刷新登录用户就没了，搞了一会儿才发现是没对存储的值进行判定使用；淦

store文件夹下的index.js中的getter：

getters: {
   
   
  users:state=>{
   
   
  //判定获取后的值是否为空值，
    if(!state.users){
   
   
    //获取新的值返回
      return JSON.parse(sessionStorag

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

James_F

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue数据错乱问题解决方案：如何处理无痕模式导致的数据错乱

HackMasterX的博客

09-30

768

在Vue应用程序开发中，无痕模式（或者称为隐私模式）是浏览器提供的一种隐私保护功能。然而，使用无痕模式可能导致Vue应用程序中的数据错乱问题。本文将介绍该问题的原因，并提供一种解决方案来处理这个问题。

解决vue项目刷新页面后用户名数据丢失

qq_45888887的博客

04-29

1787

项目场景：使用vue开发时候遇到的问题：用户登录后获取用户名，并显示在页面上，刷新页面后会出现用户名数据丢失情况。问题描述用户登录后获取用户名，并显示在页面上，刷新页面后会出现用户名数据丢失情况。原因分析：查询资料发现，是刷新页面后VUEX中的store中数据会被清除。vuex中的store是用来存储组件状态的。刷新页面时，vue实例重新加载，store会被重置。所以，一些不应该被重置的数据，应该使用本地存储来进行存储。解决方案：使用本地存储。过程（补充了Vuex的简单使用教程）：

参与评论您还未登录，请先登录后发表或查看评论

【已解决】Vue 刷新后用户名消失，store数据丢失

还有很长很长的路

12-08

2807

利用本地存储，解决问题Vue 刷新后用户名消失，store数据丢失

vuex页面刷新后数据丢失的方法

12-11

1. 原因（1）js代码是运行在内存中的，代码运行时的所有变量、函数都是保存在内存中。（2）刷新页面，以前申请的内存被释放，重新加载脚本代码，变量要重新赋值。（3）要想刷新后数据不丢失就必须把数据存储在外部，例如：Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API，让你可以将数据存储在硬盘上，做持久化存储。 2. HTML5提供的2种客户端存储数据的新方法 localStorage存储数据：（1）存储的数据是永久性的，永不过期；（2）作用域是限定在文档源级别的。同源的文档间共享同样的localStorage数据（不论该源

解决vue页面刷新，数据丢失

admin12345671的博客

03-13

315

解决vue页面刷新，数据丢失来源 | https://www.cnblogs.com/tp51/p/14026035.html 在做vue项目的过程中有时候会遇到一个问题，就是进行F5页面刷新的时候，页面的数据会丢失，出现这个问题的原因是因为当用vuex做全局状态管理的时候，store中的数据是保存在运行内存中的，页面刷新时会重新加载vue实例，store中的数据就会被重新赋值，因此数据就丢失了，解决方式如下：解决方法一：最先想到的应该就是利用localStorage/sessionStora

Vue 页面刷新，状态数据丢失问题

sinat_36539161的博客

11-07

9457

在开发过程中发现，Vuex 状态值存在页面刷新，数据丢失情况。具体：在登陆页成功登陆，将用户信息保存到 Vuex，跳转至首页，首页显示用户信息，再刷新首页，vuex中保存的数据会丢失！原因：store里的数据是保存在运行内存中的，当刷新页面，以前的内存被释放，重新加载脚本，store里面的数据就会被重新赋值。解决方法：将state里的数据保存一份到本地存储。在登陆页面传数据 ...

解决Vue中父子传值数据丢失问题

10-16

然而，在使用过程中，开发者可能会遇到页面刷新后子组件接收的父组件数据丢失的问题。这个问题的解决方法是在子组件的watch属性中监听数据变化，然后重新对数据进行处理。这通常涉及到数据的深拷贝，以避免在更新...

Vue 动态路由权限控制：解决刷新路由丢失问题

08-03

然而，当开发者在SPA中使用动态路由，并且涉及到用户权限验证时，他们可能会遇到一个常见问题：在用户刷新页面后，由于SPA的特性，原本需要通过后端验证才能获取的路由状态可能会丢失，从而导致页面显示错误或者权限...

vue单页面应用刷新网页后vuex的state数据丢失的解决方案

热门推荐

赵天铭的博客

08-06

5万+

最近在用vue写pc端项目，用vuex来做全局的状态管理，发现当刷新网页后，保存在vuex实例store里的数据会丢失。 1. 产生原因其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store里面的数据就会被重新赋值。 2. 解决思路一种是state里的数据全部是通过请求来触发action或mutation来改变一种是将state...

通过接口登录后进入个人中心页面，刷新数据丢失(Vuex获取的数据刷新后消失)

W_4ever的博客

06-04

419

vuex获取通过aioxs请求赋值的数据刷新后丢失

vuex登录状态刷新页面状态消失解决办法

zax533716144909的博客

07-22

1606

vue项目中记录登陆状态使用vuex 但是有一个缺点就是每次刷新页面状态都会消失 app.vue data () { return { islogin:null, } }, // 组件创建之前 created:function() { //在页面加载时读取sessionStorage里的状态信息如果有的话就存进vuex里面 if (sessionStorage.getItem("storedata") )

Vuex状态刷新状态丢失的处理方法

hanq2016的博客

08-03

2108

Vuex状态刷新状态丢失的处理方法

vuex刷新页面丢失登录的token信息的解决方案

黄钢的博客

09-19

3万+

最近真的是和这个token给干上了，被这个token验证搞的非常无语了抓狂了一整天，还是解决了，貌似解决了，记录一下。

Vue刷新后页面数据丢失问题的解决过程

不定时分享最优质的网络技术与教程，满满的干货。

12-03

6825

在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,这篇文章主要给大家介绍了关于Vue刷新后页面数据丢失问题的解决过程,需要的朋友可以参考下！值得注意的是：Vuex ----状态管理模式 + 库相当于共享仓库，方便任何组件直接获取和修改。state - 数据【存项目共享状态，是响应式的，store的数据改变，所有依赖此状态的组件会更新】$store.state.countmutations - 方法【同步函数，只建议在这个地方修改数据】inc(state, 参数

vue登录成功后导航栏获取不到用户信息

高电平的博客

02-12

1349

完美解决【使用v-if判断localStorage(或sessionStorage)中是否存在用户信息来识别用户是否登录，进而更新导航栏上的用户信息】

vuex中利用缓存解决刷新state数据丢失问题

Whoopsina的博客

03-05

1289

在使用vuex的过程中，经常会遇到刷新页面时state中数据丢失，此时可以利用本地缓存解决注意：实例代码为uniapp项目，可以将缓存方法转换为原生 //在index.js中 state: { userInfo: null }, getters:{ userInfo(state) { if(!state.userInfo){ state.userInfo = uni.getStorageSync('userInfo'); } return state.userInfo } },

解决vuex页面刷新数据丢失

博客

11-29

763

//全局监听，页面刷新的时候将store里state的值存到sessionStorage中，然后从sessionStorage中获取，再赋值给store。然后再把session里面存的删除即可，相当于中间件的作用。 //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store")) { this.$...

ant-design-vue中Input.Password页面刷新后丢失是什么原因