webapp的用户信息是存在浏览器里还是存在state里？用的是框架vue和vuex

Question

1. 进来是登录页，那么用户的信息是存在浏览器里还是state里？存在localStorage还是sessionStorage里？
2. 登陆之后进入首页，是否要在进入首页之前将首页数据请求到然后存储到state里？
3. state里的数据在刷新之后会还原，万一用户刷新了一下页面岂不是要重新登录？

公司现刚做过一个angular1的项目，每次刷新一次页面后数据就没了，用户就得重新登录，我现在做的是新项目，用vue+vuex开发的，我觉得刷新一下页面就得重新登录很不合理，但是又不知道该怎么做，请各位大佬指点一下，谢谢

Answer 1

用户信息放到store里但是需要缓存到sessionStorage中,如：
store.js中：

state: {
    userInfo: sessionStorage.getItem('xxx-info');
},
mutations: {
    setUserInfo(state, info) {
        state.userInfo=info;
        sessionStorage.setItem('xxx-info', info);
    }
}

登录成功：

this.$store.commit('setUserInfo',info);

需要用户数据直接vuex中获取：

this.$store.state.userInfo;

Answer 2

我们是这样做的, 用户登录的时候 后台在cookie上设置sessionId , 然后其他请求就根据sessionId, 判断是哪个用户, 前端不需要怎么处理.

你也可以把用户信息存在storage里面, localStorage 和 sessionStorage 都行 , 看你想保存多久

Answer 3

localStorage可以一直存储，sessionStorage当用户关闭浏览器时就会被清除，所以看你自己选择用哪种方式。

Answer 4

我的做法是 localStorage 和 state 都存了一份，读取 state，如果不存在则读取 localStorage 里的更新到 state 中（用户刷新，或者重新进入的情况下），如果 localStorage 不存在则说明未登录。

Answer 5

1.用户信息
一般的做法：登录成功后会，在需要的时候，通过接口获取。如果你们的项目有对其频繁的操作，存到state或localStorage或sessionStorage都可以，不过你得理解好这三者的区别以及时效性，然后根据项目做对应的防范手段。

2.将首页数据请求到state里
你这么做的目的是什么呢？有别的地方，想复用首页的数据？一般，如果只是展示型的数据，没必要存state里的。
vuex的目的是管理单向数据流，当遇到太过复杂的交互时，方便调试数据用的。你们的首页有这个需求的话，就存起来吧。

3.数据在刷新后会还原
没太理解场景，首先肯定的一点是，如果不是登录态超时的话，这点就很不合理，那么，是什么导致了刷新后数据就没了？

Answer 6

就存cookie中就行了，別整啥localstorage，state啥的，異步請求的時候帶上傳給後臺就OK了，後臺拿著信息與session中比對，OK就是已登陸。

Answer 7

记录登录状态的时候，在vuex和storage里面都存一份，
用的时候，可以这样。
computed:{

user_info(){ //如果state.user_info等于初始值,返回session数据
    if( this.$store.state.user_info=={}){
       this.$store.commit('user_info',JSON.parse(window.sessionStorage.user_info))
    }
    return this.$store.state.user_info
}

}