Vuex中的信息,刷新页面后,数据没有了的解决方案

解决方案一,检查Vuex中的数据,没有的话,重新从服务器获取,该方案可以满足存储的简单信息。该方法的好处是比较干净。

mounted: function(){
  var that = this;
  //如果登录后,刷新了,vuex里的登录数据会清空,这里重新从服务器获取数据
  if(tools.getCookie('token') && !this.$store.state.user.user_type){
    // 判断不需要重新获取信息的页面
    var noNeed      = ['/login','/register','/reset'];
    var currentPath = this.$router.currentRoute.path;      
    if(noNeed.indexOf(currentPath) != -1 ){
      return;
    }

    Indicator.open();

    this.$http.defaults.headers.post['XX-Token']       = tools.getCookie('token');
    this.$http.defaults.headers.post['XX-Device-Type'] = tools.getCookie('devices_type');

    this.$http({
      method: 'GET',
      url: '/user/profile/userInfo',
      headers: {
        "XX-Token": tools.getCookie('token'),
        "XX-Device-Type": tools.getCookie('devices_type'),
        'Content-Type': 'application/x-www-form-urlencoded'
      }
    })
    .then(function(response) {
      var code  = response.data.code;
      var msg   = response.data.msg;
      if(code == 0){
        that.$store.commit("setUser", response.data.data);
      }else if(code=="10001"){
        that.$router.push("/login");
      }
      Indicator.close();
    })
    .catch(function(err){
      Indicator.close();
      Toast("catch:"+err);
    });   		
  }
}

 

解决方案二,用户信息建议存储到localStorage里面存储一份
localStorage.setItem(key, value) //存储数据,value为string类型,如果要存对象,先转换
localStorage.getItem(key) //获取数据

 

 

声明:本站所有文章和图片,如无特殊说明,均为原创发布。商业转载请联系作者获得授权,非商业转载请注明出处。
随机推荐
JavaScript class 的 this 指向
WordPress 常用的路径
WordPress 插件开发
JavaScript navigator对象
WordPress 上传附件
JavaScript 代码混淆加密工具 javascript-obfuscator
MySQL 的 sql_mode 模式介绍:为什么 MySQL 中 int,float,double 类型字段插入空字符时自动转为0
WordPress 分类添加自定义字段