vue PC端项目中解决userinfo问题

在vue2 中用脚手架建立的项目，后端提供接口获取数据。在公司做第一个项目的时候不清楚公司里的对接流程，结果后续代码被一个接口整的乱七八糟，这个接口是获取用户信息的接口——'usre/info'。

如果用户登录了以后，很多（几乎全部）页面都要用到userinfo，难道每个页面都要写个 getUserInfo 方法去获取？好烦的好吧，如果你不觉得烦，那不用往下看了。。。

再写完第一个项目后，我在反思这个userinfo数据要怎么处理好，下边处理的关键代码：

index.html 中引入的 public.js

...

var USERINFO = 500;
var CANNEXT = false;

...

　　

APP.vue

export default {
  beforeCreate: function(){
    this.axios.post('user/info',{}).then(function(res){
      if (res.data.code == 200)
      {
        USERINFO = res.data.data;
      }
      CANNEXT = true;
    }).catch(function(error){console.log("后院起火了 =>" + error);});
  },
}

　　

　

main.js


router.beforeEach((to, from, next) => {
  let requestnum = 0;
  let timer = setInterval(function(){
    requestnum++;
    if (CANNEXT)
    {
      console.log(requestnum);
      clearInterval(timer);
      next();
    }
  },10);
})

　　

vue的全局混合

var mixin = {
      data: function(){
            USERINFO: USERINFO  
      }    
}
module.exports = mixin

　　

这么写了后项目整体代码好了很多。如果用户登录了， USERINFO就是用户信息对象，未登录就是500了。而USERINFO这个变量因为在混合里，所以 template标签里也可以直接用。