登录页面实现记住我功能

煸橙干儿~~2024-02-01 20:50

实现思路：

完成选择框的双向绑定得到一个true或者false的选中状态
如果当前为true，点击登录时，表示要记住，把当前的用户名和密码存入本地
组件初始化的时候，从本地取账号和密码，把账号密码存入用来双向绑定的form身上
如果当前用户没有记住，状态为false，点击登录的时候要把之前的数据清空

代码如下：

javascript 复制代码

// vue页面内容如下
    <el-form ref="form" :model="loginForm" :rules="rules">
        <el-form-item label="账号" prop="username">
          <el-input v-model="loginForm.username" />
        </el-form-item>

        <el-form-item label="密码" prop="password">
          <el-input v-model="loginForm.password" />
        </el-form-item>

        <el-form-item prop="remember">
          <el-checkbox v-model="rememberMe">记住我</el-checkbox>
        </el-form-item>

        <el-form-item>
          <el-button
            type="primary"
            class="login_btn"
            @click="loginBtn"
          >登录</el-button>
        </el-form-item>
      </el-form>

javascript 复制代码

// vue页面的js内容如下
  created() {
    const login_form = localStorage.getItem('form_key')
    if (login_form) {
      const { username, password } = JSON.parse(login_form)
      this.loginForm.username = username
      this.loginForm.password = password
    }
  },
  methods: {
    loginBtn () {
      this.$refs.form.validate(async (flag) => {
        if (!flag) return
        try {
          // 判断是否选择记住我
          if (this.rememberMe) {
            localStorage.setItem('form_key', JSON.stringify(this.loginForm))
          } else {
            localStorage.removeItem('form_key')
          }
          this.$router.push('/')
        } catch (err) {
          this.$message.error(err.response.data.msg)
        }
      })
    }
  }