前端JS通过Cookie实现记住密码

目录

步骤1:掌握在cookie中存值

步骤2:掌握在cookie中通过name取值

步骤3:vue2集成ElementUI实现页面

步骤4:前端校验,通过axios连接后端

步骤5:后端代码(仅供参考)

---

步骤1:掌握在cookie中存值

    /**
     * [获取cookie]
     * @param {string} cookieName
     * @return {string} cookie
     */
    export function setCookie(cookieName, cookieValue, dayExpira) {
      //获取当前时间(中国标准时间))
      let time = new Date();
      //将天数转化为毫秒值+当前时间毫秒值=预计过期时间毫秒值
      time.setTime(time.getTime() + (dayExpira * 24 * 60 * 60 * 1000));
      //将预计过期时间毫秒值转化为预计过期时间字符串(格林威治时间)
      let expires = "expires=" + time.toUTCString();
      //cookie存储格式为name=value;expires
      document.cookie = cookieName + "=" + cookieValue + "; " + expires;
    }

注:参数dayExpira为设置多少天过期,默认为Session,即会话结束后过期

    // noinspection JSCheckFunctionSignatures
    setCookie("token", "123456");
    // 存储一个名为token,值为123456,结束时间为会话结束时间

步骤2:掌握在cookie中通过name取值

    //参数为cookie的name值
    export function getCookie(cookieName) {
      let name = cookieName + "=";
      //获取所有的cookie 例:a=123; b=123; c=123 split(去除符号';')
      let cookie = document.cookie.split(';');
      for (let i = 0; i < cookie.length; i++) {
        let cookieQuery = cookie[i];
        //如果查询到的cookie第一个值为空格,则从第二个字符串开始截取
        while (cookieQuery.charAt(0) === ' ') cookieQuery = cookieQuery.substring(1);
        //执行结束
        if (cookieQuery.indexOf(name) !== -1) {
          //返回查询到的cookie的value值
          return cookieQuery.substring(name.length, cookieQuery.length);
        }
      }
      return "";
    }

步骤3:vue2集成ElementUI实现页面

步骤4:前端校验,通过axios连接后端

步骤5:后端代码(仅供参考)

    /**
     * 密码登录
     */
    @RequestMapping("loginByPwd")
    public R loginByPwd(@RequestBody Auth user) {
        QueryWrapper wrapper = new QueryWrapper<>();
        wrapper.eq("auth_phone", user.getAuthPhone());
        Auth one = authService.getOne(wrapper);
        if (one == null) {
            return R.failed("未查询到该用户");
        }
        String password = DigestUtil.md5Hex(user.getAuthPwd() + one.getSalt());
        if (!StrUtil.equalsIgnoreCase(one.getAuthPwd(), password) || one.getAuthPwd() == null) {
            return R.failed("密码错误");
        }
        //加密签名
        byte[] key = one.getSalt().getBytes();
        //通过用户id获取Token
        String token = JWT.create().setPayload("id", user.getAuthId()).setKey(key).sign();
        return R.successed(token);
    }