SpringBoot+Vue实现登录状态的持久化（LocalStorage）

最新推荐文章于 2024-09-10 20:26:21 发布

Chenbaozeng

最新推荐文章于 2024-09-10 20:26:21 发布

阅读量542

点赞数

文章标签： vue.js 前端 javascript spring boot 后端 java

本文链接：https://blog.csdn.net/Chenbaozeng/article/details/131491062

版权

文章介绍了在前端开发中如何实现登录状态的持久化，通过Vuex管理和LocalStorage存储用户信息和token。在登录时，后端返回用户对象和token，前端使用JSON.stringify将对象转为字符串存储。退出登录时需清除LocalStorage中的数据。在Vue的created生命周期钩子中检查LocalStorage，若存在用户信息，则提交到Vuex的store中，以便全局访问。

摘要由CSDN通过智能技术生成

相信大家在实际的开发过程中，登录的信息容易在我们刷新之后，就没啦！

那么，要搞清楚如何维持登录状态的持久化就必须要掌握这些前置的知识：

1.vuex

2.LocalStorage

那么这样就OK啦，我们先看看后端在登录的时候会返回什么呢？

不难看出，这里是返回了一个字典map

这就是前端接收到的user对象和一个token（这个看系统需不需要）

在前端，这个属于[object Object]类型的对象，如果在 LocalStorage 中存储的是 [object Object]，那通常意味着你尝试存储了一个 JavaScript 对象，但是 LocalStorage 只能存储字符串类型的数据。要解决这个问题，你需要将 JavaScript 对象转换为字符串，然后再存储到 LocalStorage 中。可以使用 JSON.stringify() 方法将对象转换为 JSON 字符串，然后再进行存储。

localStorage.setItem("token", res.token)
localStorage.setItem("user",JSON.stringify(res.res))

那么，每次退出登录之前都要把LocalStorage的Item删除！不然会一致存储这个数据在浏览器中，那么对于后面的登录状态的持久化就有影响！

//举个栗子
this.$router.push("/login")
localStorage.removeItem("token")
location.reload();
this.$message.success("退出成功")

接下来想一想，每次刷新我们是不是要在页面渲染之前进行查找LocalStorage的数据，有的话就进行数据的渲染，所以我们可以在vue的create这个生命周期函数里面执行！

并且每次可以用一个变量来表示这个item，让后取出来就存储到vuex的store的state里面，这样在整个vue的项目就都可以拿到这个数据啦，以下是代码参考：

created() {
    const user = JSON.parse(localStorage.getItem("user"));
    console.log(user)
    const token = localStorage.getItem("token");
    console.log(token)
    // 根据登录状态信息更新组件的数据或执行相应的操作
    if (user) {
      this.$store.commit('updateUserInfo',{
        photo:user.avatarUrl,
        username:user.username,
        nickname:user.nickname,
        email:user.email,
        phone:user.phone,
        address:user.address,
        token:token
      })
    }
  },

怎么样，是不是很简单呢？