vue中使用cookies和crypto-js实现记住密码和加密的方

我们来谈谈如何在 Vue 中结合使用 cookies 和 crypto-js 来实现密码的加密以及记住密码的功能。这不仅能提高数据安全性，也能提供便捷的用户体验。

使用 crypto-js 进行加密与解密

第一步是安装 crypto-js。你可以通过 npm 来安装这个库：

```bash

npm install crypto-js

```

在你需要的 Vue 组件中引入 crypto-js：

```javascript

import CryptoJS from "crypto-js";

```

接下来是如何使用它进行加密和解密操作。假设我们有一个要加密的字符串 "my message" 和一个密钥 "secretkey123"。

加密过程如下：

```javascript

// Encrypt 加密

var cipherText = CryptoJS.AES.encrypt(

"my message",

"secretkey123"

).toString();

console.log(cipherText); // 输出加密后的字符串

```

解密过程如下：

```javascript

// Decrypt 解密

var bytes = CryptoJS.AES.decrypt(cipherText, "secretkey123");

var originalText = bytes.toString(CryptoJS.enc.Utf8); // 获取解密后的原始文本

console.log(originalText); // 输出 'my message'

```

注意，如果你要加密的数据不是字符串类型（例如用户ID是number类型），你需要先将其转换为字符串。这是因为 crypto-js 是基于字符串进行操作的。对于复杂的加密需求，你可能需要深入了解 crypto-js 的更多功能。密钥的保管非常重要，务必保证密钥的安全。对于更高级的用法，请访问 crypto-js 的官方文档获取更多信息。现在让我们转向关于记住密码的部分。记住密码的实现原理通常涉及在登录时保存账号密码到 cookies 中，并在后续登录时从 cookies 中提取这些信息自动填充表单。其中，保存和取出 cookies 分别使用 setCookie 和 getCookie 方法。接下来我们来编写这些方法的实现代码。首先是设置 cookie 的方法：在登录时，如果用户选择了“记住我”的选项，我们将使用 crypto-js 对账号密码进行加密，然后将加密后的账号密码保存到 cookies 中。代码示例如下：```javascript // 设置 cookie 的方法setCookie(portId, psw, exdays) { // 对账号密码进行加密var cipherPortId = CryptoJS.AES.encrypt(portId+'', "secretkey123").toString();var cipherPsw = CryptoJS.AES.encrypt(psw+'', "secretkey123").toString();console.log(cipherPortId+'/'+cipherPsw); // 输出加密后的账号密码字符串 // 设置 cookie 的过期时间var exdate = new Date();exdate.setTime(exdate.getTime() + (24 60 60 1000 exdays)); // 根据 exdays 设置过期时间 // 将加密后的账号密码保存到 cookie 中document.cookie = 'portId=' + cipherPortId + '; expires=' + exdate + '; path=/';document.cookie = 'psw=' + cipherPsw + '; expires=' + exdate + '; path=/';}```当用户在下次访问网站时，我们可以从 cookies 中提取出保存的账号密码信息，并自动填充到登录表单中。这部分的代码实现依赖于浏览器的 cookies 功能和 JavaScript 的操作 cookies 的 API。关于具体的实现细节和代码示例，这里不再赘述。结合使用 cookies 和 crypto-js 在 Vue 中实现密码的加密与记住密码功能可以提高数据的安全性和用户体验的便捷性。希望这篇文章对你有所帮助！登录体验优化：Cookie与本地存储的完美结合

在现代Web应用中，登录体验的优化对于用户的留存和满意度至关重要。本文将指导你如何利用Cookie和本地存储（LocalStorage）提升登录流程的便捷性和安全性。让我们开始吧！

一、Cookie的巧妙运用

在Web开发中，Cookie常被用于存储用户信息，以便在多个页面间共享。以下是关于Cookie的操作示例：

设置Cookie：

```javascript

function setCookie(name, value, days) {

let expires = new Date();

expires.setTime(expires.getTime() + (days 24 60 60 1000));

document.cookie = name + "=" + value + ";path=/;expires=" + expires.toGMTString();

}

```

读取Cookie：

```javascript

function getCookie(name) {

if (document.cookie && document.cookie.length > 0) {

let arr = document.cookie.split("; ");

for (let i = 0; i < arr.length; i++) {

let arr2 = arr[i].split("=");

if (arr2[0] === name) {

return arr2[1];

}

}

}

return null;

}

```

清除Cookie：

```javascript

function clearCookie(name) {

document.cookie = name + '=; Max-Age=-99999999;';

}

```

二、登录流程的优化

在登录方法中，我们可以结合Cookie和本地存储来提升用户体验。以下是一个示例：

登录方法：

```javascript

login() {

this.$http.post(...) //发起登录请求

.then(res => {

if (res.data.code === "success") {

if (this.rememberPsw) { //用户选择了记住密码

// 使用setCookie方法保存账号和密码信息到Cookie中，可设置有效期，如30天

this.setCookie("currentPortId", this.currentPortId, 30); //保存账号信息到Cookie中