当用户登录成功之后，需要将当前用户的登录信息保存在本地，方便后面使用。具体实现如下：
8.1 登录成功保存数据
在登录操作执行成功之后，通过commit操作将数据提交到 store 中，核心代码如下：
this.postRequest('/login', {
username: this.loginForm.username,
password: this.loginForm.password
}).then(resp=> {
if (resp && resp.status == 200) {
var data = resp.data;
_this.$store.commit('login', data.msg);
var path = _this.$route.query.redirect;
_this.$router.replace({path: path == '/' || path == undefined ? '/home' : path});
}
});
8.2 store
store 的核心代码如下：
export default new Vuex.Store({
state: {
user: {
name: window.localStorage.getItem('user' || '[]') == null ? '未登录' : JSON.parse(window.localStorage.getItem('user' || '[]')).name,
userface: window.localStorage.getItem('user' || '[]') == null ? '' : JSON.parse(window.localStorage.getItem('user' || '[]')).userface
}
},
mutations: {
login(state, user){
state.user = user;
window.localStorage.setItem('user', JSON.stringify(user));
},
logout(state){
window.localStorage.removeItem('user');
}
}
});
为了减少麻烦，用户登录成功后的数据将被保存在 localStorage 中（防止用户按 F5 刷新之后数据丢失），以字符串的形式存入，取的时候再转为 json。当用户注销登陆时，将 localStorage 中的数据清除。
扫码关注微信公众号 江南一点雨，回复 2TB，获取超 2TB Java 学习教程~