vue保持登录

我们都知道对于单页面开发来说，页面是不允许刷新的，但是对于产品来说，这么做很不合理，于是我们在开发单页面的时候也要做登录保持。
登录保持需要我们做那些？
1 保持用户的信息
2 保持获取到的数据
今天就依管理后台来讲一下用户登录保持的方式，主要说下思想。
对于vue来说，我们一般都会在用户登录后，把获取到的用户信息存储到vuex里面，这就导致了刷新数据丢失，还有就是管理后台配置的权限表我们也会存储在vuex里面，刷新也会导致数据的丢失，以及一些其他依赖的数据刷新也会导致数据的丢失。
要解决的问题就是刷新后能保持这些数据不丢失
最直接的方式就是重新发送请求，在重新获取数据，重新保存。
那么问题来了
1 依赖什么发送？
2 在什么时间发送？
3 在什么地方发送？

依赖什么发送？

用户登录以后我们可以获取到一个登录的session或者token,我们就是依赖这个来发送的，根据项目的要求可以把它存储在localstorage或者sessionstorage里面，或者cookie里面，由于我的项目用户在关闭网页后就算退出了登录，所以我保存到了sessionstorage里面，保存的地址主要根据项目的要求来，在用户刷新的时候他们是不会丢失的，我们就可以依赖它来重新获取数据了。

 window.sessionStorage.setItem('token',res.data.session);

在什么时间发送？在什么地方发送？

针对这个问题，网上有很多的做法
1 使用vue-router的守卫

router.beforeEach((to, from, next) => {
  // 在这个里面我们可以发送请求去获取数据，并跳转页面
  next();
});

2 在app.vue的生命周期里面

mounted(){
const session =window. sessionStorage.getItem('token')
 // 在发送请求,填充vuex
this.$store.dipatch('getUserInfo',payload).then(()=>{
  // 在获取后续的数据
 })
}

针对我的项目我来讲一下我的做法（看个人需求）
因为我做的是管理后台，要根据用户的角色，在去获取用户的权限表，再去生成路由，还要生成菜单，数据的获取使用的WebSocket，由于获取的数据很多中间还有很多的计算，都放在一起会导致页面刷新很慢，所以我分了好几步来完成，在刷新的时候会导致发生的事情有 router.beforeEach，WebSocket的重连，app.vue生命钩子刷新，所以我把要的事情分成了三块，并且它们发生的顺序来。
我先测试来一下他们的发生顺序
1 socket

if (session) {
       console.log(`1111` + '/' + new Date().getTime());
        const args = {
          id: new Date().getTime(),
          cmd: 'CSRequestReconnect',
          data: {
            session: session
          }
        };
        this.send(args);
      }

2 router-beforEach

router.beforeEach((to: any, from: any, next: any) => {
   console.log(`2222` + '/' + new Date().getTime());
  next()
 }
)

3 app.vue

 mounted() {
   console.log(`3333` + '/' + new Date().getTime());
  }

结果刷新打印的是
2222/1534391106086
3333/1534391106121
1111/1534391106159
最先需要获取的是角色，所以我把获取角色的请求放在了

router.beforeEach((to: any, from: any, next: any) => {
   this.$store.dispatch('getUserInfo',session)
   next()
 }
)

在配置路由，菜单的代码我放在了app.vue里面

mounted(){
  // this.$store.dispatch('changeRouter',payload).then(()=>{
   this.$store.dispath('createMenu',menu)
 })
}

这样就可以保存登录了

vue保持登录