抖音實戰~密碼找回

文章目錄

• ​​1. 密碼找回流程圖​​
• ​​2. 前端源碼​​
• ​​3. 後端​​

1. 密碼找回流程圖

2. 前端源碼

updatePassword() {
        var me = this;
        var mobile = me.mobile;
        // 送出前，手機号校驗
        var reg = /^1[0-9]{10,10}$/;
        if (!mobile || !reg.test(mobile)) {
          uni.showToast({
            title: '請輸入正确的手機号',
            icon: 'none'
          })
          return
        }

        if (!this.agree) {
          uni.showToast({
            title: '請先同意《隐私及服務協定》',
            icon: 'none'
          });
          return;
        }

        var serverUrl = app.globalData.serverUrl;
        // 密碼找回
        var password = me.password;

        if (app.isStrEmpty(password)) {
          uni.showToast({
            title: "新密碼不能為空",
            icon: "none"
          });
          return;
        }
        console.log("forgotPassword")
        // uni.showLoading()
        // 調用後端登入注冊
        uni.request({
          method: "POST",
          url: serverUrl + "/user/forgotPassword",
          data: {
            "mobile": mobile,
            "smsCode": me.verifyCode,
            "newPassword": password
          },
          success(result) {
            console.log("result", result)
            var status = result.data.status;
            if (status != 200) {
              uni.showToast({
                title: result.data.msg,
                icon: "none",
                duration: 3000
              });
            }

            if (status == 200) {
              uni.navigateTo({
                url: '../loginRegist/loginRegist'
              })
              uni.showToast({
                title: result.data.msg,
                icon: "none",
                duration: 3000
              });
              // 登入成功，跳轉登入頁，關閉目前頁
            }
          }
        });
      }      

3. 後端

/**
     * 重置密碼
     *
     * @param forgotPasswordBO 手機号 + 驗證碼+新密碼
     */
    @PostMapping("forgotPassword")
    public GraceJSONResult forgotPassword(@Valid @RequestBody ForgotPasswordBO forgotPasswordBO,
                                          HttpServletRequest request) {
        String mobile = forgotPasswordBO.getMobile();
        String code = forgotPasswordBO.getSmsCode();
        String newPassword = forgotPasswordBO.getNewPassword();

        // 1. 從redis中獲得驗證碼進行校驗是否比對
        String redisCode = redis.get(MOBILE_SMSCODE + ":" + mobile);
        if (StringUtils.isBlank(redisCode) || !redisCode.equalsIgnoreCase(code)) {
            return GraceJSONResult.errorCustom(ResponseStatusEnum.SMS_CODE_ERROR);
        }

        // 2. 查詢資料庫，判斷使用者是否存在
        Users user = userService.queryMobileIsExist(mobile);
        if (user == null) {
            return GraceJSONResult.errorCustom(ResponseStatusEnum.ACCOUNT_NOT_EXIST);
        }
        this.userService.forgotPassword(mobile, newPassword);
        //重置密碼成功，将驗證碼删除
        redis.del(MOBILE_SMSCODE + ":" + mobile);
        return GraceJSONResult.ok(ResponseStatusEnum.RESET_PASSWORD_SUCCESS);
    }