前端MD5加密——js-md5包 & 简略版-登录功能——规则校验、密码处理-md5加密
地址——https://www.npmjs.com/package/js-md5
概念
MD5是一种信息摘要算法(对称加密),一种被广泛使用的密码散列函数,可以产生出一个128位(16字节)的散列值,用来确保信息传输完整一致性。它可以计算任意长度的输入字符串,得到固定长度的输出,而且这个算法是不可逆的,即使得到了加密的密文,也不可能用解密算法反算出明文。
2、js加密的好处
(1)用js对私密信息加密可避免在网络中传输明文信息,被人截取数据包而造成数据泄露。
(2)避免缓存中自动缓存密码。比如在使用谷歌浏览器登陆时,输入的用户名和密码会自动缓存,下次登陆时无需输入密码就可以实现登陆,这样就给别人留下漏洞,当别人用你电脑登陆或把input的type改为text 那么你的密码就泄露了.使用js加密时,缓存的加密后的密文,用密文做密码登陆是不成功的,即使泄露也是泄露的密文,对密码不会造成威胁,缺点是每次登陆时都要手动输入密码,较麻烦。
(3)使用js加密,减少了服务器加密时的资源消耗,从理论上提高了服务器的性能。为了安全,很有必要再做服务器端的加密.无论从理论还是实际,两道门比一道门要安全些.至少给攻击者造成了一个障碍。
vue 安装
npm install js-md5
全局
定义:
main.js中引入
import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
全局使用:
this.$md5('MD5加密')
局部
定义:
import md5 from 'js-md5'
局部使用:
md5('md5加密')
案例
因为MD5加密常用在密码加密中,就暂时不需要全局定义,两种方式都列出。
login.vue
<el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="用户名">
<el-input v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="密码">
<el-input v-model="form.password"></el-input>
</el-form-item>
<el-form-item>
<el-button type="primary" @click="onSubmit(form)" :loading="loginLoading">登 录</el-button>
</el-form-item>
</el-form>
<script>
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;
});
}
}
}
</script>