在vuex 下的 action下的userAction.js中
添加
export function login(from, self) { axPost(‘/api/login‘, from, function(res) { if (res.data == 0) { alert("账号密码错误") } else { note.commit(‘userloginbean‘, res.data); self.$router.push("/"); sessionStorage.setItem("name", res.data.name); } // }, function(err) { alert(err); }); } 注 sessionStorage.setItem("name", res.data.name); HTML 5 Web 存储在客户端临时存储数据
2.在要跟行的数据中例如heade.vue中
<div class="site-nav-sign" v-if="items.name"> <router-link to="/login"><a href="">{{items.name}}</a></router-link> <router-link to="/register"><a href="">消息</a></router-link> </div> <div class="site-nav-sign" v-else> <router-link to="/login"><a href="">亲,请登陆</a></router-link> <router-link to="/register"><a href="">免费注册</a></router-link> </div>
在script中添加
export default { data(){ return{ items:{name:null} } }, mounted:function(){ this.items.name=sessionStorage.getItem("name"); } }
后端的session过期后需要网前端发送一个值来判断是否过期,如果过期就要重新给sessionStorage赋值为空
参考文献:http://www.w3school.com.cn/html5/html_5_webstorage.asp