Encrypt the login password on the front end, md5+salt value

Scenario: The front-end formulates rules for account passwords, and the back-end does not participate. It is completely verified by the front-end.
Disadvantages: In the era of advanced Internet, most people can see your account and password by casually attacking your website, so that they can easily enter Your website is not safe.
Advantages: Basically none, unless it is a temporary construction that does not require a backend

Of course, this is the scene when I was developing. You can also use this set of encryption logic when encrypting with the backend.

Understanding MD5

In fact, before MD5, there were MD4 and MD2. They are algorithms that have been iterated from generation to generation.

Features of MD5
1. Fixed length: No matter how long the string is, the length after encryption is the same.
2. Easy to use: We can directly download the MD5 package and use it directly md5("加密内容")
3. Irreversibility: Based on this irreversibility, the security is greatly improved
亿点小知识：对于MD5不可逆的说法网上有很多讨论如果是暴力逆转的话就不好说了

What is the salt value?

This is the first time I heard about the salt value and am confused about salt?
Translate salt: salt
In fact, the SALT value is a random value with irregular values.
In fact, the salt value is to add some salt to the algorithm. The salt is equivalent to the encrypted key, which increases the difficulty of attacking the website to crack the encrypted value.

combat

1. Install MD5

npm install js-md5

2. Import MD5
global import

import md5 from 'js-md5';
Vue.prototype.$md5 = md5;
// 其他页面使用
this.$md5("加密内容")

partial reflection

import md5 from 'js-md5';
md5("加密内容")

3. On the login page

<script setup lang="ts">
import {
    
     reactive, ref, onMounted } from 'vue'
import md5 from 'js-md5';
let form = reactive({
    
    
  user: "",
  password: "",
})
const solt = 'yanzhi' // 盐值
const newUser=   // newUser 是前端写死加密过后的账号进行来比对的
  {
    
        
    user: '1232f297a57a5a74', // admin
    passwor: '1232f297a57a5a74' // 123456
  },

// 登录按钮
const = subForm(()=>{
    
    
	这里就可以判断 md5(md5(from.user)+solt) 和 newUser.user的值是否相等
})

The code may be clearly described
Here we use the formula to describe

md5(md5("unencrypted account")+salt value)

From the above description, it is actually to encrypt the account first and then add the salt value to encrypt again

insert image description here
The above is the md5+ salt value. Thank you for reading.
If you encounter other problems, you can discuss and study with me in private.
If it is helpful to you, please 点赞bookmark it thank you~!
Pay attention to favorite bloggers and will continue to update...