之前做过一次项目又忘了,这次记录一下
也就是这个”个人信息"的小细节
思路:
在登录成功直接保存用户基本信息到全局user,随后在需要获取的时候再从user中取出。退出账户的时候删除user的相关信息
第一步:在登录成功直接保存用户基本信息到全局user
LoginView.vue登录页面:
<script>
methods: {
login() {
this.$refs["form"].validate((valid) => {
if (valid) {
request.post("/user/login", this.form).then((res) => {
if (res.code === 0) {
this.$message.success("登录成功");
localStorage.setItem("user", JSON.stringify(res.data)); //存储用户信息到浏览器
this.$router.push("/"); //登录成功后进行页面跳转
console.log("Login" + res.data.nickname);
} else {
this.$message.error(res.msg);
}
});
}
});
},
},
};
</script>
在登录成功后浏览器已经成功存储user
第二步:在需要获取的时候再从user中取出
例如:我在header中需要用户的昵称
那么我就在header组件中取出user
header头部组件
<script >
export default {
...
data() {
return {
user: JSON.parse(localStorage.getItem("user")),
}
},
...
</script>
再在页面中调用
<span class="el-dropdown-link" style="font-size: 16px">{{ user.nickname }}</span>
于是就成功取出用户的昵称
在账户退出时也不要忘了删本地存储信息
<script>
methods: {
logout() {
this.$router.push("/login");
localStorage.removeItem("user");
this.$message.success("退出成功");
},
},
</script>
其他的信息,比如头像也是以此类推
个人详情信息也是一样
created() {
const username = this.user.username;
if (!username) {
this.$message.error("无法获取用户信息");
return;
}
request.get("/user/getUsername/" + username).then((res) => {
this.form = res.data;
});
},