精华内容
下载资源
问答
  • 前端小白,最近使用vue做用户的登录/退出,在开发过程中遇到的一些问题,记录下来。...搜索了一些方法,使用localStorage实现页面刷新之后数据不丢失的方法 代码如下 vuex const state = { userInfo: JSON.pars...

    前端小白,最近使用vue做用户的登录/退出,在开发过程中遇到的一些问题,记录下来。

    由于vue自身特性的原因,vuex中的数据在页面刷新之后其中的数据会初始化,这就导致组件之间通过vuex传递的数据在用户f5刷新页面之后会丢失。

    搜索了一些方法,使用localStorage实现页面刷新之后数据不丢失的方法

    代码如下

    vuex

    const state = {
    	userInfo: JSON.parse(localStorage.getItem("userInfo")) || {},//先去localStorage中获取数据
    }
    const mutations = {
    	setuserInfo(state, v) {
    		localStorage.setItem('userInfo', JSON.stringify(v));//将传递的数据先保存到localStorage中
    		state.userInfo = v;// 之后才是修改state中的状态
    	},
    }
    

    组件中使用

    if (rst.data.status == 1) {
    		//登录成功
    		let userInfo = rst.data.userInfo
    		this.$store.commit("setuserInfo", userInfo);//更新userInfo
    }
    

    做到这里,登录成功后F5刷新页面,登录状态依旧保持了。(一阵狂喜)
    但是当点击退出后,虽然发送后台退出成功了,但是页面登录状态还是依旧保持。。。因此需更新userInfo值为空

    代码如下

    if (rst.data.status == 1) {
    	 //退出成功
         this.$store.commit('setuserInfo','');//更新userInfo
     }
    

    到这里,遇到的问题完美解决了。
    前端小白,如代码中有什么不足请多多指教哦!

    展开全文
  • 对于一个网站,有些页面是需要登录后才能访问的,这个时候需要做到权限管理 1、页面权限控制 这个常见做法是,在路由跳转的时候做判断,通过router钩子函数...2、vuex页面F5刷新后维持刷新前的状态不变 对于在...

    对于一个网站,有些页面是需要登录后才能访问的,这个时候需要做到权限管理

    1、页面权限控制

    这个常见做法是,在路由跳转的时候做判断,通过router钩子函数判断页面是否需要登录

    首先在router配置 meta属性

    然后在钩子函数

    to.meta.requireAuth为true就跳去登录页面登录,否则就直接到要访问的页面

    2、vuex页面F5刷新后维持刷新前的状态不变

    对于在当前访问网页使用F5刷新之后,页面的变量和参数都会丢失,这时页面显示的内容会变得不友好,用户体验不好,我们可以通过将页面的参数和变量保存到sessionStorage中,当刷新后再从sessionStorage将变量和状态取回来渲染回页面,那样F5刷新后,用户看到的页面还是刷新前的。

    首先在store的index.js中,state,增加页面要保存的变量,并且将它们的值和sessionStorage里面的绑定

    然后再新增mutations,这是将变量写入sessionStorage的方法

    接着就可以在登录函数中这样调用,登录成功后将需要的变量写进sessionStorage

    在路由的钩子函数里面可以这样将变量取回来,那样页面刷新后,也能将刷新前的状态保持

    3、登录状态保存

    我们在网页中,常常有一个功能,就是像下图那样,勾选后十天内免登录,也就是记住登录状态

    这个较上面的功能有一个不一样的地方就是,上面的刷新,假如我是登录状态,我将浏览器关闭之后再打开,再打开浏览器,我还是需要登录的

    那如果我勾选了十天内免登录,登录后没有退出,然后把浏览器关闭了,再重新打开,是不需要登录的,这个功能怎么实现呢?

    这就要用到localStorage来实现了

    首先,一样需要在store的index.js中,state,增加页面要保存的变量,并且将它们的值和localStorage里面的绑定

    然后再新增mutations,这是将变量写入localStorage的方法

    需要一个自动登录的方法,如果是勾选了就为true,然后就会将需要用到的变量写到localStorage

    当然还有登出的

    接着就可以在登录函数中,根据有没有勾选自动登录来判断,是不是在登录成功后将需要的变量写进localStorage

    最后在路由的钩子函数里面做相应的处理

     

     

    是不是需要登录,然后有没有勾选自动登录,根据布尔值来进行不同的路由操作,然后需要用到的变量操作其实和上面保持页面刷新后的是大同小异的

    当然这里还需要一个后台的校验接口,就是在勾选了自动登录后,如果是10天期限,那就要在进入true 的分支后再请求后台去校验token是否过期,如果过期就要重新登录了,否则就一切照常

     

     

    小结

    ---------------------------------------end--------------------------------------------------------------------

    展开全文
  • 在之前写的文章中,vue---将登录成功后后台返回的参数token,id等保存在store中,供其他组件调用存在问题:当页面刷新后, vuex中的数据被初始化,导致vuex的state丢失。那么如何防止页面刷新后state丢失呢? 解决...

    需求说明:

    在之前写的文章中,vue---将登录成功后后台返回的参数token,id等保存在store中,供其他组件调用 存在问题:当页面刷新后,vuex中的数据被初始化,导致vuex的state丢失。那么如何防止页面刷新后state丢失呢?

    解决方案:

    借助sessionStorage解决上述问题, sessionStorage属性允许在浏览器中存储 key/value 对的数据。

    知识点:

    sessionStorage语法如下:

    // 保存数据到 sessionStorage
    sessionStorage.setItem('key', 'value');
    
    // 从 sessionStorage 获取数据
    let data = sessionStorage.getItem('key');
    
    // 从 sessionStorage 删除保存的数据
    sessionStorage.removeItem('key');
    
    // 从 sessionStorage 删除所有保存的数据
    sessionStorage.clear();
    

    注意:sessionStorage只能存储字符串类型,因此当需要保存object类型的数据到sessionStorage中,先需要进行序列化。

    【 sessionStorage.setItem("loginUserInfo", JSON.stringify(userInfo));】获取数据时,将之前存储的JSON字符串先转成JSON对象再进行操作【 JSON.parse(sessionStorage.getItem("loginUserInfo"));】

    本案例将后台传回的token直接保存在sessionStorage中,在axios实例中,当设置headers时,直接从sessionStorage获取。将后台传回的用户数据通过sessionStorage传入vuex中。

    (1)登录组件【Login.vue】中,当登录成功后

    ①把token直接保存在sessionStorage中;

    ②通过【 this.$store.commit("setUserInfo", res.data.result.user);】,提交mutation。

    (2)①在axios实例中,当设置headers时,直接从sessionStorage获取

    在router中【index.js】中加入组件内守卫如下:

    // 路径"/"为登录路径
    router.beforeEach((to, from, next) => {
      if (to.path == "/") {
        sessionStorage.removeItem("token");
      }
      let token = sessionStorage.getItem("token");
      if (!token && to.path != "/") {
        next({ path: "/" });
      } else {
        next();
      }
    });

    ②在store中的【index.js】中如下:mutations【setUserInfo】中,通过【sessionStorage.setItem('key','value')】保存用户信息,在getters【loginUserInfo】中,获取用户信息,注意:当页面刷新时,vuex的数据会被初始化,因而需判断,当state中的用户信息为空时,需要从【sessionStorage.getItem('key')】中获取用户信息,不为空则直接返回。

    在其他组件中,调用【loginUserInfo】

     

     

    参考文章:

    展开全文
  • vue项目中记录登陆状态使用vuex 但是有一个缺点就是每次刷新页面状态都会消失 app.vue data () { return { islogin:null, } }, // 组件创建之前 created:function() { //在页面加载时读取sessionStorage...

    vue项目中记录登陆状态使用vuex 但是有一个缺点就是每次刷新页面状态都会消失

    app.vue

         data () {
          return {
            islogin:null,
          }
        },
        // 组件创建之前
        created:function() {
         //在页面加载时读取sessionStorage里的状态信息 如果有的话就存进vuex里面
          if (sessionStorage.getItem("storedata") ) {
              this.$store.replaceState(Object.assign({},             
              this.$store.state,JSON.parse(sessionStorage.getItem("storedata"))))
          }
          //在页面刷新时将vuex里的信息保存到sessionStorage里
          window.addEventListener("beforeunload",()=>{
              sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
          });
          // 兼容iphone手机
          window.addEventListener("pagehide",()=>{
              sessionStorage.setItem("storedata",JSON.stringify(this.$store.state))
          });
            //如果页面加载的时候sessionstorage没有的话 就从vuex中取
          sessionStorage.setItem("isLogin",this.$store.state.isLogin)
        
        },

     

    展开全文
  • 参数名 ,现在的问题是,最近要做H5页面集成平台, 有大量的state值, 而且不是一个项目的, 分模块的无法请求后台拿回最新状态, 只能做本地存储, 刷新时重新赋值给this.$store.state, 这里就...
  • 刷新页面时保存状态管理数据 前言 某次做看板的时候刷新了下页面忽然注意到数据有问题,排查之下发现是保存在状态管理的数据丢失了。刚好当时时间充裕加上考虑到可能会有刷新页面的情况出现,就想着该问题是怎么...
  • vue当中保存用户的一个登录状态 当时是登录组件(login.vue)是一个main.vue中子组件,通过路由进入登录的组件当中 然后在用户登录的时候,后台会传一个用户名的参数给我, 我的那个main.vue组件中需要拿到这个参数...
  • 对于一个网站,有些页面是需要登录后才能访问的,这个时候需要做到权限管理 1、页面权限控制 ...对于在当前访问网页使用F5刷新之后,页面的变量和参数都会丢失,这时页面显示的内容会变得友好,用户..
  • 需求:刷新页面,登录状态不会因此改变 首先说一下vuex和localStorage的区别 1.实质区别 vuex存的是状态,存储在内存;localStorage是浏览器提供的接口,让你存的是接口,以文件的形式存到本地 2.应用场景 vuex...
  • 之前虽然用过localStorage刷新保存vuex的状态,但理解深,现在又有了一些理解。 如果次次都要维护vuex和localStorage,那为什么直接用localStorage,于是肯定需要有好的方法。 在App.vue的created生命周期放...
  • react与mobx搭配时如何缓存mobx的数据(刷新之后保存状态)问题思路代码写在最后 问题 近日在使用react的过程中,在状态管理方面,我使用了mobx,但是发现它与vuex有一个一样的问题,在强制刷新之后会使我保存的状态...
  •  //flag是在java中定义的一个变量,用于在刷新前后在页面中暂时保存radio状态  var rd=document.getElementsByName("wc_type"); //wc_type是radio的name  for(var i=0;i;i++){  if(inputType==i){  rd[i]....
  • const store = new Vuex.Store({ // 定义状态  myInfo: JSON.parse...)) || {}, //这里使用JSON.parse是因为我localStorage中保存的是一个对象字符串 }, //修改状态 mutations:{ setInfo(state,info){...
  • Vue 页面刷新状态数据丢失问题

    千次阅读 2018-11-07 15:47:20
    在开发过程中发现,Vuex 状态值存在页面刷新,数据丢失情况。 具体:在登陆页成功登陆,将用户信息保存到 Vuex,跳转至首页,首页显示用户信息,再刷新首页,vuex中保存的数据会丢失!   原因:store里的数据是...
  • 因为vuex中的数据是保存在内存中的所以页面刷新之后vuex中的状态丢失,解决方案就是在页面刷新的时候把状态存在sessionStorage中,页面加载的时候再取出来 可以把下面的代码放在App.vue的created钩子函数中,这样...
  • JQuery 定期刷新网页,保持登录状态Session 本地的系统,session保持时间太短,导致频繁登录。 因此,需要定期刷新网页,以使Session处于活跃。 操作步骤 选个简单的页面。比如:http://localhost/intro/help.html ...
  • Vue中使用vuex在页面刷新之后状态不丢失的解决方法 但是那和我直接利用js存储技术(localStorage、sessionStorage)有什么区别呢? 首先vuex是用在单页面直接通信的,他可以实现实时更新,一旦某个地方修改了...
  • 使用vuex刷新界面后,状态丢失

    千次阅读 2019-01-15 17:31:27
    vuex用于管理项目中的全局状态,但是我们一刷新vuex中保存的全局状态就会被全部初始化,解决方法如下: import createPersistedState from ‘vuex-persistedstate’ export default new Vuex.Store({ state, ...
  • 一、需求问题: 在vue的项目开发中,我们可能会经常遇到这样的需求,实现多个复杂...这里以点击选择城市列表的城市后,所有页面的城市都会跟着变换,在刷新页面后,城市信息保存,不会发生丢失。 二、需求分析: 在...
  • 监听Vue.created事件,并添加beforeunload事件,在浏览器刷新前,保存状态至sessionStorage中 export default { name: 'app', created () { // 监听beforeunload事件 window.addEventListener('beforeunload', ...
  • 解决ALV刷新后选中状态丢失的办法

    千次阅读 2019-05-06 14:06:03
    在ALV的data_change事件中刷新了ALV,导致每次更改数据时丢失了ALV的选中状态,导致后续 保存的时候使用get_selected_rows方法时丢失数据,导致ALV编辑后更新失败。 解决方法:每次更新后重新用set_selected_rows...
  • Nuxt-保存登陆状态

    万次阅读 2020-09-01 06:43:42
    当然也可以使用vue-cookies进行保存token,问题来了,nuxt项目怎么保存登录状态呢? 当然上面这两种方法我们都可以使用, 但是有个问题,由于在created钩子中存在window对象(获取cookie、localStora.
  • 遇到的问题 在后台管理系统中,菜单是基本的组成部分,ui框架也很多,看起来也都很完美, 但是, 第一:刷新后菜单恢复到初始的样子; 第二:刷新后store数据消失,页面无法...2、将当前打开的一级和二级菜单保存一...
  • 主要介绍了vue单页面实现当前页面刷新或跳转时提示保存,在当前页面刷新或跳转时提示保存并可取消刷新,以防止填写的表单内容丢失,感兴趣的小伙伴们可以参考一下
  •  2.getters去取定义好的状态值,并在组件中使用  //组件中使用getters进行数据获取 const state={ isLogin:false } const getters = { getLogin(state){ if (!state.isLogin) { state.isLogin=...
  • Vuex信息刷新保存

    2020-06-01 10:52:15
    在使用得时候,页面刷新时,保存在vuex的数据会全部清除掉,这是我们希望的。         解决方案就是将信息绑定到sessionStorage里,产生这个问题的原因就是store的数据是...
  • 记录自己遇到的问题,以备查询。 使用VUEX来统一管理数据状态 在APP.vue中加入如下代码,目的是将vuex里的信息保存到sessionStorage里 ... //如果不是,则认为是在非登录界面刷新,将store中的数据保存到sessionS...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 42,101
精华内容 16,840
关键字:

保存登录状态刷新不丢失