关于javascript:vue登录页实现使用cookie记住7天密码功能

问题形容

我的项目的登录页中，会有要求记住 7 天明码的性能，本篇文章记录一下写法，次要是应用 cookie，正文我写的很具体了，大家能够看一下我写的正文的步骤，还是比拟具体的。亲测无效

html 局部

代码图示

成果图示

代码粘贴

            <el-form
              ref="form"
              :model="form"
              label-width="80px"
              label-position="top"
              @submit.native.prevent
            >
              <el-form-item label="用户名 / 账号">
                <div class="userError">
                  <el-input
                    size="mini"
                    v-model.trim="form.userName"
                    clearable
                  ></el-input>
                </div>
              </el-form-item>
              <el-form-item label="明码">
                <div class="pwdError">
                  <el-input
                    size="mini"
                    v-model.trim="form.loginPwd"
                    clearable
                    show-password
                  ></el-input>
                </div>
              </el-form-item>
              <el-checkbox label="记住账号" v-model="isRemember"></el-checkbox>
              <el-button native-type="submit" size="mini" @click="loginPage"
                > 登录 </el-button
              >
            </el-form>

js 局部

代码粘贴

export default {
  name: "login",
  data() {
    return {
      form: {
        userName: '',
        loginPwd: '',
      },
      isRemember: false,
    };
  },
  mounted() {
    // 第 1 步，在页面加载的时候，首先去查看一下 cookie 中有没有用户名和明码能够用
    this.getCookie();},
  methods: {
    /*  第 3 步，当用户执行登录操作的时候，先看看用户名明码对不对
              若不对，就提醒登录谬误
              若对，就再看一下用户有没有勾选记住明码
                    若没勾选，就及时清空 cookie，回到最初始状态
                    若勾选了，就把用户名和明码存到 cookie 中并设置 7 天有效期，以供应用（当然也有可能是更新之前的 cookie 工夫）*/
    async loginPage() {
      // 发申请看看用户输出的用户名和明码是否正确
      const res = await this.$api.loginByUserName(this.form)
      if(res.isSuccess == false){this.$message.error("登录谬误")
      }
      else{
        const self = this;
        // 第 4 步，若复选框被勾选了，就调用设置 cookie 办法，把以后的用户名和明码和过期工夫存到 cookie 中
        if (self.isRemember === true) {
          // 传入账号名，明码，和保留天数（过期工夫）3 个参数
          //  1/24/60 测试可用一分钟测试，这样看着会比拟显著
          self.setCookie(this.form.userName, this.form.loginPwd, 1/24/60);
          // self.setCookie(this.form.userName, this.form.loginPwd, 7); // 这样就是 7 天过期工夫
        } 
        // 若没被勾选就及时清空 Cookie，因为这个 cookie 有可能是上一次的未过期的 cookie，所以要及时革除掉
        else {self.clearCookie();
        }
        // 当然，无论用户是否勾选了 cookie，路由该跳转还是要跳转的
        this.$router.push({name: "project",});
      }
    },
    // 设置 cookie
    setCookie(username, password, exdays) {var exdate = new Date(); // 获取以后登录的工夫
      exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); // 将以后登录的工夫加上七天，就是 cookie 过期的工夫，也就是保留的天数
      // 字符串拼接 cookie, 因为 cookie 存储的模式是 name=value 的模式
      window.document.cookie = "userName" + "=" + username + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie = "userPwd" + "=" + password + ";path=/;expires=" + exdate.toGMTString();
      window.document.cookie = "isRemember" + "=" + this.isRemember + ";path=/;expires=" + exdate.toGMTString();},
    // 第 2 步，若 cookie 中有用户名和明码的话，就通过两次切割取出来存到 form 表单中以供应用，若是没有就没有
    getCookie: function () {if (document.cookie.length > 0) {var arr = document.cookie.split(";"); // 因为是数组所以要切割。打印看一下就晓得了
        // console.log(arr,"切割");
        for (var i = 0; i < arr.length; i++) {var arr2 = arr[i].split("="); // 再次切割
          // console.log(arr2,"切割 2");
          // // 判断查找绝对应的值
          if (arr2[0] === "userName") {this.form.userName = arr2[1]; // 转存一份保留用户名和明码
          } else if (arr2[0] === "userPwd") {this.form.loginPwd = arr2[1];// 可解密
          } else if (arr2[0] === "isRemember") {this.isRemember = Boolean(arr2[1]);
          }
        }
      }
    },
    // 革除 cookie
    clearCookie: fu![image](/img/bVcOHhz)
      this.setCookie("","", -1); // 清空并设置天数为负 1 天
    },
  },
};

cookie 存储图示

总结

其实也很简略，就是设置一个过期工夫，也就是 cookie 的生效的日期，当然两头须要有一些格局的解决，数据的加工。

补充，cookie 是存在浏览器中，浏览器装置在电脑中，比方装置在 C 盘，所以 cookie 是存在 C 盘中的某个文件夹下，那个文件夹不仅有 cookie，还有 localStorage 和 sessionStorage 和别的，具体哪个文件夹大家能够本人入手找一找。其实所谓的本地存储其实就是存在本人的电脑上。