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

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

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

阅读 8.8k
7 个回答

用户信息放到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;

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

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

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

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

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

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

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

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

记录登录状态的时候,在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
}

}

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题