一
二、浏览器存储获取用户信息
login(){
//访问java后端程序
//通过axios ajax框架向后端发送异步请求
this.$http.post("login",jsonToString(this.form)).then((resp)=>{
//响应所有的数据
//console.log(resp);
//前端接收到之后,会自动的将json的格式转为js对象
//console.log(resp.data);
//console.log(resp.data.account);
if(resp.data==2){
this.$message({ message: '账号或密码错误',type: 'warning'});
}else if(resp.data==500){
this.$message({ message: '系统忙,稍后再试',type: 'warning'});
}else{
this.$message({ message: '登录成功',type: 'success'});
//本地存储,浏览器关闭依然还在
//Window.localStorage;
//会话间存储,浏览器关闭会话结束,数据清除
window.sessionStorage.setItem("id",resp.data.id);
window.sessionStorage.setItem("account",resp.data.account);
window.sessionStorage.setItem("img",resp.data.img);
this.$router.push("/main");
}
});
}
主页获取用户信息:
<script>
export default{
data(){
return{
account:"",
img:""
}
},
methods:{
logout(){
this.$confirm('确定要退出?', '提示', {
confirmButtonText: '确定',
cancelButtonText:'取消',
type: 'warning'
}).then(() => {
this.$http.get("login");
//清除数据
window.sessionStorage.clear();
this.$router.replace("/login");
})
},
test() {
this.$http.get("back/test").then((resp)=>{
});//测试登录后可以做其他操作
}
},
mounted() {
var account = window.sessionStorage.getItem("account");
var img = window.sessionStorage.getItem("img");
this.account = account;
this.img = img;
}
}
</script>
三四五六七八