Vue中使用md5进行数据加密的实现方法

npm install crypto-js
# 或者
yarn add crypto-js

<template>
  <div>
    <input v-model="message" placeholder="输入需要加密的信息">
    <button @click="encrypt">加密</button>
    <p>加密后的结果: {{ encryptedMessage }}</p>
  </div>
</template>

<script>
import { MD5 } from 'crypto-js';

export default {
  data() {
    return {
      message: '',
      encryptedMessage: ''
    };
  },
  methods: {
    encrypt() {
      this.encryptedMessage = MD5(this.message).toString();
    }
  }
};
</script>

<template>
  <form @submit.prevent="onSubmit">
    <input type="password" v-model="password" placeholder="密码">
    <button type="submit">登录</button>
  </form>
</template>

<script>
import axios from 'axios';
import { MD5 } from 'crypto-js';

export default {
  data() {
    return {
      password: ''
    };
  },
  methods: {
    async onSubmit() {
      const encryptedPassword = MD5(this.password).toString();
      try {
        await axios.post('/api/login', { password: encryptedPassword });
        // 登录成功后的逻辑
      } catch (error) {
        console.error('登录失败:', error);
      }
    }
  }
};
</script>

import Vue from 'vue';
import Vuex from 'vuex';
import { MD5 } from 'crypto-js';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    encryptedData: ''
  },
  mutations: {
    setEncryptedData(state, data) {
      state.encryptedData = MD5(data).toString();
    }
  },
  actions: {
    encryptData({ commit }, data) {
      commit('setEncryptedData', data);
    }
  }
});

<template>
  <div>
    <input v-model="dataToEncrypt" placeholder="输入需要加密的数据">
    <button @click="encryptAndStore">加密并存储</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dataToEncrypt: ''
    };
  },
  methods: {
    encryptAndStore() {
      this.$store.dispatch('encryptData', this.dataToEncrypt);
    }
  }
};
</script>

<template>
  <ul>
    <li v-for="item in encryptedItems" :key="item.id">{{ item.encryptedValue }}</li>
  </ul>
</template>

<script>
import { MD5 } from 'crypto-js';

export default {
  props: {
    items: Array
  },
  computed: {
    encryptedItems() {
      return this.items.map(item => ({
        id: item.id,
        encryptedValue: MD5(item.value).toString()
      }));
    }
  }
};
</script>

import axios from 'axios';
import { MD5 } from 'crypto-js';

const API_URL = '/api/submit';

export function submitEncryptedData(data) {
  const encryptedData = MD5(JSON.stringify(data)).toString();
  return axios.post(API_URL, { data: encryptedData });
}

// 使用示例
submitEncryptedData({ userId: 123, username: 'JohnDoe' })
  .then(response => {
    console.log('提交成功:', response.data);
  })
  .catch(error => {
    console.error('提交失败:', error);
  });
}