Vue项目保持用户登录状态（localStorage + vuex 刷新页面后状态依然保持）_vue保持登录状态(1)

本文链接：https://blog.csdn.net/2301_82243710/article/details/138321099

实现功能：用户登录成功后，刷新浏览器页面或者关闭浏览器再次打开网页后，登录状态依然保持，直到用户点击登出。

二、实现步骤及涉及要点

1. 首先在 vuex 中的 state 属性中添加一个空对象 userInfo{ } 用于保存用户登录后的状态；

涉及要点：

state 属性(状态)用于添加多个组件共享的变量，作用类似于 vue 中的 data；

2. 在登录页面中，判断登录成功后创建对象 userInfo{ }，并添加描述登录状态的各属性，然后将该对象分别存入 localStorage 和 vuex；

涉及要点：

localStorage 属性允许访问 Document 源的 Storage 对象，存储的数据保存在浏览器会话中；

与 sessionStorage 的唯一区别就是 localStorage 属于永久性存储，除非我们手动清除，而 sessionStorage 属于临时存储，浏览器关闭后便会被清空。

存：localStorage.setItem(‘myCat’, ‘Tom’);
取：var cat = localStorage.getItem(“myCat”);
删：localStorage.removeItem(“myCat”); 或 localStorage.clear(“myCat”);

JSON.stringify() 系列化对象，将返回的对象类型转为字符串类型；

this.$store.state，取 vuex 中 state 中的属性，如：

this.$store.state.userInfo = userInfo //取出 vuex 中的 userInfo 并赋值为新的 userInfo

在挂载阶段，判断登录状态 userInfo；设置相关属性之后，就可以正常保存登录状态了。

因为 localStorage 为永久保存，所以即使关闭浏览器再次打开网页登录状态依然存在，除非手动清除 localStorage 数据；

设置登出，清除 localStorage 中的数据；

实现功能。

三、涉及代码

vuex（store/index.js）

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo:{}
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

设置登录的页面（部分代码，无法复制即用，仅作参考）

登录方法

//登录方法
login() {
  //验证码的验证
  var randStr = this.rand.toString().replace(/,/g, ""); //随机生成的验证码为数组形式，此处将其转为字符串并去掉中间相隔的逗号
  var codeStr = this.code; //用户输入的验证码
  if (randStr.toLowerCase() == codeStr.toLowerCase()) { //比较用户输入的与随机生成的验证码,不区分大小写
    //获取登录接口
    axios.post("user/login", {
      name: this.name,
      password: this.password,
      administrator: this.usertyp
    }).then(result => {
      console.log(result.data);
      const code = result.data.code;
      this.token = code;
      if (this.token == 1003) {
        this.$message.error('用户名或密码未输入!');
      } else if (this.token == 1001) {
        this.$message.error('登录失败，请检查用户名或者密码是否正确。');
      } else if (this.token == 1005) {
        this.$message.error('您不是管理员，无管理员登录权限！');
      } else if (this.token == 200) {
        if (this.usertyp == "2") { //管理员登录
          this.$message.success('登录成功！');
          this.dialogFormVisible = false; //登录成功后登录插槽关闭
          this.loginReg = false;//隐藏登录注册按钮，显示欢迎信息
          this.manage = true;//显示管理员登录信息
          let userInfo = {
            isLogin: true,
            manage: true,
            name: this.name
          };
          localStorage.setItem("userInfo", JSON.stringify(userInfo));
          this.$store.state.userInfo = userInfo
          console.log('this.$store.state.userInfo', this.$store.state.userInfo)
          setTimeout(() => { //此处必须使用vue函数，否则this无法访vue实例
            this.$message(`欢迎您，管理员 ${this.name}！`)
          }, 2000);
          console.log(this.usertyp)
        } else if (this.usertyp == "") {  //普通用户
          this.$message.success('登录成功！');
          this.dialogFormVisible = false; //登录成功后插槽关闭
          this.loginReg = false;//隐藏登录注册按钮，显示欢迎信息
          this.user = true; //显示普通用户登录信息


### 最后

喜欢的话别忘了关注、点赞哦~

**[开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

> ![前端校招面试题精编解析大全](https://img-blog.csdnimg.cn/img_convert/8c2b6497eec78b688390f85749032a70.png)