3.登录页面是Vue,首页是html,怎么实现与Vue数据互通呢
解决方案:在登录页面,登录成功,就把用户信息存放到LocalStorage里面,就是存放到浏览器存储,html页面这样就可以直接拿到登录用户的数据。
methods: {
login(){
this.$refs['loginForm'].validate((valid) => {
if (valid) {
request.post('/pre/login', this.admin).then(res => {
if (res.code === '200'){
console.log(res.data)
/*存储登录对象的数据*/
// 1.定义要存储的对象:用户的登录信息
const user = {
id: res.data.id,
username: res.data.username,
email: res.data.email,
phone: res.data.phone
};
// 2.将对象转换为字符串,存储到 LocalStorage
localStorage.setItem("user", JSON.stringify(user));
// 3.从 LocalStorage 获取数据,并将其转换为对象
const userStr = localStorage.getItem("user");
const userInfo = JSON.parse(userStr);
console.log(userInfo);
/*跳转到ToHomepage.vue*/
this.$router.push("/toHomepage")
} else {
this.$notify.error(res.msg)
}
}).catch(err => {
// 报错
console.log(err)
})
}
})
},
html页面拿取数据
<script>
/*拿到登录对象的数据*/
// 从 LocalStorage 获取数据,并将其转换为对象
const userStr = localStorage.getItem("user");
const userInfo = JSON.parse(userStr);
console.log(userInfo);
if (typeof userInfo === 'object' && userInfo === null) {
// userInfo 为空为 null
console.log("用户未登录");
} else {
// userInfo 不为空为 null
console.log("用户已登录");
const loginAndRegistry = document.getElementById('loginAndRegistry');
// loginAndRegistry.disabled = true; //设为不可用
loginAndRegistry.style.display = 'none';//设置li元素在页面上不显示且不再 DOM 中占据位置
const username = document.getElementById('username');
const $username = $('#username');
username.style.display = 'inline';//设为可见
$username.text(userInfo.username + ",欢迎您!!");
const weather = document.getElementById('weather');
weather.style.display = 'none';
}
</script>