当前位置：首页 > news >正文

vue实现简单的记住密码功能

news 来源：原创 2024/5/17 11:03:49

第一步：

在表单内中引入一个"记住密码"选择框

<el-checkbox v-model="Form.remenber">记住密码</el-checkbox>

<div class="login_box">
      <el-form ref="Form" :model="Form" class="form_in" :rules="rules">
        <!--账号-->
        <el-form-item prop="username">
          <el-input v-on:input="change" v-model="Form.username" prefix-icon="el-icon-user-solid" placeholder="请输入账号"></el-input>
        </el-form-item>
        <!--密码-->
        <el-form-item prop="password">
          <el-input v-model="Form.password" prefix-icon="el-icon-lock" placeholder="请输入密码" show-password></el-input>
        </el-form-item>
        <!--记住密码-->
        <el-checkbox v-model="Form.remenber">记住密码</el-checkbox>
        <!--按钮-->
        <el-form-item class="form_button">
          <el-button type="primary" plain @click="Login">登录</el-button>
          <el-button type="info" plain @click="resetLoginForm">重置</el-button>
        </el-form-item>
      </el-form>
    </div>

js

data() {
    return {
      Form: {
        username: '',
        password: '',
        remenber:true,
      },

第二步：

在登录成功的方法中插入

//将登录成功的状态存入缓存
            if (this.Form.remenber) {
              let obj = JSON.stringify(form)
              //如果选择记住密码，将账号和密码存缓存
              window.localStorage.setItem("form", obj)
            }

将信息存入本地缓存，虽然好像有些不安全

第三步：

在账号输入框中，绑定监听函数

//监听账号输入操作,如果输入账号，自动输入密码
   change:function (){
     let username = this.Form.username
     let form= JSON.parse(localStorage.getItem("form"))
     if (username === "admin"){
       this.Form.password = form.password
     }
   }