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

前端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、实例-登录界面

效果

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>