vue3+js 实现记住密码功能

常见的几种实现方式

1 基于spring security 的remember me 功能

localStorage

除非主动清除localStorage 里的信息，不然永远存在，关闭浏览器之后下次启动仍然存在

存放数据大小一般为5M

不与服务器进行交互通信

cookies

可以手动设置过期时间，关闭浏览器之后就清除了

存放数据大小一般为4K

每次请求都会被传送到服务器

增加一个remeber me的标签在登录页中

在登录方法中添加如下代码登录成功写入cookie

在js模块

挂载 getCookie 函数

methods 方法中实现三个函数 getCookie setCookie clearCookie

getCookie

setCookie clearCookie

完整代码

复制代码

<template>
    <div class="login_container"> <!-- 绘制全页面背景色-->
      <div class="login_box"> <!-- 绘制登录白色盒子-->
        <div class="avatar_box">  <!--  白色盒子内 头像区域 引入logo   -->
          <img src="../assets/gezi.png" alt="" />
        </div>
        <!-- 登录表单区域 ref定义一个响应式对象loginForm :model属性绑定方式 表单所有数据都自动同步到loginForm对象上
            :rules是el-form组件通过属性绑定，添加数据验证行为
        -->
        <el-form ref="loginForm" :model="loginForm" :rules="rules" label-width="80px" class="login_form" > <!-- 需要把输入框放到页面偏下的位置，login_form加一个定位器-->
          <!--   用户名     -->
          <el-form-item label="用户">
            <el-input :prefix-icon="User" v-model="loginForm.username" placeholder="请输入用户名"> </el-input>
          </el-form-item>
          <!--   密码     -->
          <el-form-item label="密码">
            <el-input :prefix-icon="Lock" v-model="loginForm.password" type="password" placeholder="请输入密码" show-password></el-input>
          </el-form-item>
          <!--    按钮区域 -->
          <el-row justify="end"> <!-- 设置按钮在右边靠齐" -->
          <el-form-item class="btn">   <!-- 按钮区域定义一个类 按钮向右对齐-->
            <el-button type="primary" @click="login" style="width: 100%; margin-top: 5px">登录</el-button>
<!--            <el-button @click="register">没有注册，请注册</el-button>-->
          </el-form-item>
            <el-form-item>
            <el-checkbox label="记住我" v-model="checked"></el-checkbox>
            </el-form-item>
          </el-row>
        </el-form>
      </div>
    </div>
</template>
<script >
import qs from 'qs'
//页面上按需引入icon
import { User, Lock } from "@element-plus/icons-vue"
import ElMessage from "element-plus";
import { onMounted} from "vue";

export default {
    name: "Login",
    setup() {
        let sub_btn = () => {
            if (!loginForm.username || !loginForm.password) {
                ElMessage.error("账户或者密码不能为空");
            }
        };


        //引用的图标通过Setup进行注册
        return {
           User,
           Lock,
          sub_btn,
        };
    },
  mounted() {
    this.getCookie()
  },
  data(){
      return{
        // 登录表单的数据绑定对象
        loginForm: {
          username: '',
          password: ''
        },
        rules:{    // 验证规则对象
          // name为验证规则数组，每个验证规则都是一个数组 trigger表示触发验证机制，blur鼠标失去焦点时触发本次验证行为
          username: [{ required: true, message: '请输入用户名', trigger: 'blur'}],
          password: [
              { required: true, message: '请输入密码', trigger: 'blur'},
              { min: 3, max: 15, message: '密码长度6到15个字符', trigger: 'blur'}],
        }
      }
    },
  methods:{
      login(){
        const that = this
        this.$refs.loginForm.validate(async valid => {
          if (!valid) return
          // 将loginForm对象转换为查询字符串
          var data = qs.stringify(this.loginForm)
          // 由于data属性是一个json对象，需要进行解构赋值{data:result}，进行状态码判断
           await this.$http.post('/api/doLogin',data).then(function (response){
            if (response.data.status === 200){
              console.log('登录成功')
              that.$message.success("登录成功")
              // cookie 密码记录
              window.sessionStorage.setItem("user", JSON.stringify(response.object))
              //  路由跳转到Home页
              that.$router.push('/home')

            }else {
              console.log('登录失败，api后端接口状态',response.data.status)
              that.$message.error("登录失败后端接口状态码"+response.data.status)
            }
          })
        });
      // 判断复选框是否被勾选 勾选在调用cookie 方法
        if (this.checked === true) {
        // 过期天数为7天
          this.setCookie(this.loginForm.username, this.loginForm.password, 7)
        }else{
          // 清除cookie

        }
      },
      register(){
        this.$router.push('/LoginRegister')

      },
      // 读取cookie
      getCookie: function (){
        if (document.cookie.length > 0) {
          // cookie 分割成一个个独立的 key value 形式
          let arr = document.cookie.split(";")
          for (var i = 0; i < arr.length; i++){
            var arr2 =  arr[i].split('=')
            if (arr2[0] === 'userName') {
              this.loginForm.username = arr2[1]
            } else  if (arr2[0] === 'userPwd'){
              this.loginForm.password = arr2[1]
            }
          }
        }

      },

      // 设置cookie
      setCookie(name, pwd, exdays){
        var exdate = new Date()
        //
        exdate.setTime(exdate.setTime() + 24 * 60 * 60 * 1000 * exdays);
        window.document.cookie = "userName" + "=" + name + ";path=/;expires=" + exdate.toUTCString();
        window.document.cookie = "userPwd" + "=" + pwd + ";path/;expires" + exdate.toUTCString();
      },
      // 清除cookie
      clearCookie: function() {
        this.setCookie("", "", -1);
      }
  }
//
}
</script>