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) //获取数据

 

 

修改时间 2018-05-15

真诚赞赏,手留余香
赞赏
随机推荐
jQuery Ajax用法示例
Serverless 笔记111
Vue函数式路由
Windows Firewall and secure FTP (FTPS) traffic
Chrome开发者工具的实用技巧(译)
PHP curl的GET和POST
跨域简单请求变成非简单请求导致的Bug
如何在ecshop首页或任意页面显示用户的当前余额
微信上传图片
macOS卸载Android Studio