前端MD5加密

2024-07-13 16:33| 来源: 网络整理| 查看: 265

前端MD5加密——js-md5包 & 简略版-登录功能——规则校验、密码处理-md5加密

地址——https://www.npmjs.com/package/js-md5

1、概述

是通过前台js加密的方式对密码等私密信息进行加密的工具

2、js加密的好处

（1）用js对私密信息加密可避免在网络中传输明文信息,被人截取数据包而造成数据泄露。（2）避免缓存中自动缓存密码。比如在使用谷歌浏览器登陆时,输入的用户名和密码会自动缓存,下次登陆时无需输入密码就可以实现登陆,这样就给别人留下漏洞,当别人用你电脑登陆或把input的type改为text 那么你的密码就泄露了.使用js加密时,缓存的加密后的密文,用密文做密码登陆是不成功的,即使泄露也是泄露的密文,对密码不会造成威胁，缺点是每次登陆时都要手动输入密码，较麻烦。（3）使用js加密,减少了服务器加密时的资源消耗,从理论上提高了服务器的性能。为了安全,很有必要再做服务器端的加密.无论从理论还是实际,两道门比一道门要安全些.至少给攻击者造成了一个障碍。

3、使用

安装

npm install js-md5

main.js或index.vue中引入

import md5 from 'js-md5'; Vue.prototype.$md5 = md5;

使用

this.$md5("加密内容") 4、实例-登录界面

效果

在这里插入图片描述

登录 import {toLogin} from '@/api/request'; import md5 from 'js-md5'; // main.js引入或登录界面引入 export default { data() { const checkpwd = (rule, value, callback) => { if (value === '') { callback(new Error('请输入密码')); } else if (value.length < 6) { callback(new Error('密码不少于6位')); return false } else { callback(); } } const validateId = (rule, value, callback) => { if (value == '') { callback(new Error('请输入用户名')); } else { const reg = /^[a-zA-Z_\-0-9]+$/; // 或者/^\w+$/表示数字字母下划线 if (reg.test(value)) { callback(); } else { callback(new Error('用户名由数字、字母、下划线、中划线组成')); } } return { form: { account: '', password: '' }, rules: { account: [// 简略版 { required: true, message: '请输入用户名', trigger: 'blur' } ], account: [// 详细版 { validator: validateId,required: true, trigger: 'blur' } ], password: [ { validator: checkpwd, trigger: 'blur', required: true } ] }, loginLoading: false }, methods: { onSubmit(form) { let loginParam = { account: this.form.account, pwd: md5(this.form.password).toUpperCase(), // md5加密处理 }; this.loginLoading = true; toLogin(loginParam).then((data) => { this.$message({ message: '登录成功', type: 'success', duration: 2000 }) }).catch(() => { this.loginLoading = false; }); } } }

【本文地址】

公司简介

联系我们