vue 프로젝트 는 쿠키 기능 예제 에 암 호 를 기억 합 니 다(원본 코드 첨부)

본 고 는 vue 프로젝트 가 비밀 번 호 를 쿠키 기능 에 기억 하 는 예 시 를 소개 하고 여러분 에 게 공유 합 니 다.구체 적 으로 다음 과 같 습 니 다.

로그 인 페이지
구현 기능:
1.비밀번호 체크 를 기억 하고 로그 인 을 눌 렀 을 때 계 정과 비밀 번 호 를 쿠키 에 저장 하고 다음 로그 인 시 폼 에 자동 으로 표 시 됩 니 다.
2.체크 하지 않 고 로그 인 을 눌 렀 을 때 삭제 하기 전에 쿠키 에 저 장 된 값 입 니 다.다음 로그 인 시 수 동 으로 입력 해 야 합 니 다.
대체적인 사고방식 은 쿠키 저장/삭제/삭 제 를 통 해 이 루어 진 것 이다.로그 인 페이지 에 들 어 갈 때마다 쿠키 를 읽 습 니 다.브 라 우 저의 쿠키 에 계 정 정보 가 있 으 면 자동 으로 로그 인 상자 에 채 워 집 니 다.쿠키 저장 은 로그 인 에 성공 한 후에 현재 사용자 가 비밀 번 호 를 기억 하 는 지 여 부 를 판단 합 니 다.선택 하면 계 정 정 정 보 를 쿠키 에 저장 합 니 다.효과 도 는 다음 과 같 습 니 다.
주요 코드 로 바로 가기
HTML 부분

<div class="ms-login">
    <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="0px" class="demo-ruleForm">
      <el-form-item prop="username">
        <el-input v-model="ruleForm.username" placeholder="   "></el-input>
      </el-form-item>
      <el-form-item prop="password">
        <el-input type="password" placeholder="  " v-model="ruleForm.password" @keyup.enter.native="submitForm('ruleForm')"></el-input>
      </el-form-item>
      <!-- `checked`   true   false -->
      <el-checkbox v-model="checked">    </el-checkbox>
      <br>
      <br>
      <div class="login-btn">
        <el-button type="primary" @click="submitForm('ruleForm')">  </el-button>
      </div>
    </el-form>
  </div>

JS 부분

  //        cookie 
  mounted() {
    this.getCookie();
  },
  methods: {
    submitForm(formName) {
             const self = this;
            //                  cookie  
            if (self.checked == true) {
              console.log("checked == true");
              //     ，  ，     3   
              self.setCookie(self.ruleForm.username, self.ruleForm.password, 7);
            }else {
             console.log("  Cookie");
             //  Cookie
             self.clearCookie();
            }
            
            //       ，               
            
            console.log("    ");
         
        });
      },
      //  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 = "userPwd" + "=" + c_pwd + ";path=/;expires=" + exdate.toGMTString();
      },
      //  cookie
      getCookie: function() {
        if (document.cookie.length > 0) {
          var arr = document.cookie.split('; '); //                    
          for (var i = 0; i < arr.length; i++) {
            var arr2 = arr[i].split('='); //    
            //         
            if (arr2[0] == 'userName') {
              this.ruleForm.username = arr2[1]; //          
            } else if (arr2[0] == 'userPwd') {
              this.ruleForm.password = arr2[1];
            }
          }
        }
      },
      //  cookie
      clearCookie: function() {
        this.setCookie("", "", -1); //  2    ，    1    
      }

브 라 우 저 에 있 는 쿠키 정 보 는 다음 그림 과 같 습 니 다.여기 있 는 쿠키 의 expire/Max-age 가 만 료 되 는 시간 을 주의 하 십시오.이 시간 은 그리니치 표준 시간 GMT 이 고 세계 적 으로 통 일 된 시간 입 니 다.GMT+8 시간 은 베 이 징 시간 입 니 다.(이 곳 은 암호 화 기능 을 하지 않 습 니 다)

원본 링크
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.