登陆页面存储密码-CSDN博客

本文链接：https://blog.csdn.net/weixin_46719868/article/details/115346466

本文介绍了如何在前端登陆页面中实现记住密码功能，通过VUE组件展示checkbox，当勾选时将用户名和密码存储在cookie中，同时提供清除和读取cookie的操作。详细展示了JavaScript封装的setCookie、getCookie和clearCookie方法及其在登录事件中的应用。

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

登陆页面存储密码

在这里插入图片描述

  <el-form-item class="other_info">
            <el-col :span="12">
              <el-checkbox size="medium" label="记住密码" name="type" v-model="checked"></el-checkbox>
            </el-col>
            <el-col :span="12" class="forgetPwd">
              <router-link to="/fgPassword">忘记密码?</router-link>
            </el-col>
          </el-form-item>

checkbox框的勾选属性是checked 绑定变量checked默认为false

return {
      checked: false,

      // 电话：400-900-3366    &nbsp;
      proappEnvFoot: '千匠星云&nbsp;企业级互联网新商业PaaS平台 | © 2016-2019',
      loginForm: {
        username: '',
        password: '',
      },
      }

js封装方法

 //设置cookie
    setCookie(c_name, c_pwd, exdays) {
      var exdate = new Date() //获取时间
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays) //保存的天数
      //字符串拼接cookie
      window.document.cookie = 'username' + '=' + c_name + ';path=/;expires=' + exdate.toGMTString()
      window.document.cookie = 'password' + '=' + c_pwd + ';path=/;expires=' + exdate.toGMTString()
    },

  // 读取cookie
    getCookie() {
      console.log(document.cookie, 'document.cookie')
      if (document.cookie.length > 0) {
        var arr = document.cookie.split('; ') //这里显示的格式需要切割一下自己可输出看下
        console.log(arr, 'arr')
        for (var i = 0; i < arr.length; i++) {
          var arr2 = arr[i].split('=') //再次切割
          //判断查找相对应的值
          if (arr2[0] == 'username') {
            console.log('sdsdsd')
            this.loginForm.username = arr2[1] //保存到保存数据的地方
          } else if (arr2[0] == 'password') {
            this.loginForm.password = arr2[1]
          }
        }
      }
    },

//清除cookie
    clearCookie: function() {
      this.setCookie('', '', -1) //修改2值都为空，天数为负1天就好了
    },

点击登陆按钮调用方法

 //点击登陆事件
    handleLogin(loginForm) {
      if (this.loading) {
        return false
      }
      this.$refs.loginForm.validate(valid => {
        console.log(this.$store, store)
        if (valid) {
          this.loading = true
          this.$store
            .dispatch('Login', this.loginForm)
            .then(data => {
              this.loading = false
              if ('success' in data && data.success) {
                const self = this
                if (self.checked == true) {
                  // console.log("checked == true");
                  //传入账号名，密码，和保存天数3个参数
                  self.setCookie(self.loginForm.username, self.loginForm.password, 7)
                  console.log('点击了记住密码')
                  console.log(self.loginForm.username, self.loginForm.password, 'self.loginForm.username, self.loginForm.password')
                } else {
                  console.log('清空Cookie')
                  //清空Cookie
                  self.clearCookie()
                }
                // return
                this.$message.success(data.msg)
                this.getAppList(data.dataObj)
              } else if ('success' in data && data.success === false && data.msg == 'quality') {
                this.$message.error('没有权限或资质不匹配')
              } else {
                this.$message.error(data.msg)
              }
            })
            .catch(res => {
              this.loading = false
            })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },