ホームページ > 記事 > ウェブフロントエンド > vue の cookie と crypto-js がパスワードを暗号化して記憶する方法
この章では、vue で cookie と crypto-js を使用してパスワードを暗号化して記憶する方法を紹介します。必要な方は参考にしていただければ幸いです。
最初のステップは
npm install crypto-js
をインストールすることです。2 番目のステップは vue コンポーネントに
import CryptoJS from "crypto-js";
をインポートすることです必要な手順は 3 つあります。
// Encrypt 加密 var cipherText = CryptoJS.AES.encrypt( "my message", "secretkey123" ).toString(); console.log(cipherText) // Decrypt 解密 var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123"); var originalText = bytes.toString(CryptoJS.enc.Utf8); console.log(originalText); // 'my message'
を使用します。mymessage は文字列であることに注意してください。ユーザー ID (数値タイプ) を暗号化する場合は、まず文字列
に変換する必要があります。その他の用途 公式ドキュメントを参照してください
実装原則は、ログイン時に「パスワードを記憶する」がチェックされている場合 (「パスワードを記憶する」を保存する)です。 ' status to localstorage ) アカウントのパスワードを cookie に保存します;
ログイン ページに入るときに、パスワードが記憶されているかどうか (localstorage から判断) を判断し、パスワードが記憶されている場合は、 Cookie をフォームにエクスポートします。
setcookie メソッドを使用して保存し、getcookie メソッドを使用して取得します。
わかりました、メソッドを書きましょう
//设置cookie setCookie(portId, psw, exdays) { // Encrypt,加密账号密码 var cipherPortId = CryptoJS.AES.encrypt( portId+'', "secretkey123" ).toString(); var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString(); console.log(cipherPortId+'/'+cipherPsw)//打印一下看看有没有加密成功 var exdate = new Date(); //获取时间 exdate.setTime(exdate.getTime() + 24 * 60 * 60 * 1000 * exdays); //保存的天数 //字符串拼接cookie,为什么这里用了==,因为加密后的字符串也有个=号,影响下面getcookie的字符串切割,你也可以使用更炫酷的符号。 window.document.cookie = "currentPortId" + "==" + cipherPortId + ";path=/;expires=" + exdate.toGMTString(); window.document.cookie = "password" + "==" + cipherPsw + ";path=/;expires=" + exdate.toGMTString(); }, //读取cookie getCookie: function() { if (document.cookie.length > 0) { var arr = document.cookie.split("; "); //这里显示的格式请根据自己的代码更改 for (var i = 0; i <p>ログイン メソッドは次のとおりです: </p><pre class="brush:php;toolbar:false"> login() { this.$http //请根据实际情况修改该方法 .post(...) .then(res => { if (res.data.code == "success") { if (this.rememberPsw == true) { //判断用户是否勾选了记住密码选项rememberPsw,传入保存的账号currentPortId,密码password,天数30 this.setCookie(this.currentPortId, this.password, 30); }else{ this.clearCookie(); } //这里是因为要在created中判断,所以使用了localstorage比较简单,当然你也可以直接根据cookie的长度or其他骚操作来判断有没有记住密码。 localStorage.setItem("rememberPsw", this.rememberPsw); } else { //---- } }) .catch(err => { //---- }); },
最後に、ユーザーが作成した Dog サブディレクトリのパスワードを覚えているかどうかを判断する必要があります。関連する操作を実行する関数
//判断是否记住密码 //**注意这里的true是字符串格式,因为Boolean存进localstorage中会变成String** created() { //判断是否记住密码 if (localStorage.getItem("rememberPsw") == 'true') { this.getCookie(); } }
最後に、インターフェイスが貼り付けられます。ここで、rememberPsw はパスワードを記憶するボタンの v-model 値、currentPortId は最初のボックスの v-model 値、password は v です。 -2 番目のボックスのモデル値。
以上がvue の cookie と crypto-js がパスワードを暗号化して記憶する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。