UA 引入md5 添加修改密码

he wei

2022-07-19 443cfa67661ee7f407b1f811ac79236fde84c68c

UA 引入md5 添加修改密码

 package.json

@@ -26,6 +26,7 @@
    "js-cookie": "^2.2.1",
    "mockjs": "^1.1.0",
    "nprogress": "^0.2.0",
    "js-md5": "^0.7.3",
    "viser-vue": "^2.4.8",
    "vue": "2.6.11",
    "vue-i18n": "^8.18.2",

 src/assets/js/tools/RSA.js

New file
@@ -0,0 +1,32 @@
import {JSEncrypt} from "jsencrypt";
import const_num from "@/assets/js/const/const_num";

export default {
  /**
   * 非对称加密算法-加密
   * @param word  需要加密的字符串
   * @returns {string | false}
   */
  encrypt(word) {
    let encryptor = new JSEncrypt();
    let publicKey = const_num.publicKey;
    encryptor.setPublicKey(publicKey);
    let rsaPassWord = encryptor.encrypt(word);
    return rsaPassWord;
  },
  /**
   * 非对称加密算法-解密
   * @param word
   * @param privateKey
   * @returns {string | false}
   */
  decrypt(word, privateKey) {
    if(!privateKey) {
      return "请写入私钥";
    }
    let decrypt = new JSEncrypt();
    decrypt.setPrivateKey(privateKey);
    let getWord = decrypt.decrypt(word);
    return getWord;
  }
}

 src/assets/js/tools/formatPassword.js

New file
@@ -0,0 +1,9 @@
import md5 from "js-md5";
import RSA from "@/assets/js/tools/RSA";

function formatPassword(pwd) {
  let password = pwd+"&&&&&&&&&&"+md5(pwd);
  return RSA.encrypt(password);
}

export default formatPassword;

 src/layouts/header/AdminHeader.vue

@@ -18,7 +18,7 @@
<!--            </a>-->
<!--          </a-tooltip>-->
          <header-notice class="header-item"/>
          <header-avatar class="header-item"/>
          <header-avatar class="header-item" @changepwd="changePwd" />
          <a-dropdown class="lang header-item">
            <div>
              <a-icon type="global"/> {{langAlias}}
@@ -29,6 +29,17 @@
          </a-dropdown>
      </div>
    </div>
    <a-modal
      :visible="changePwdShow"
      :footer="null"
      title="修改密码"
      :destroyOnClose="true"
      @cancel="cancel"
    >
      <change-password
        @close="cancel"
      ></change-password>
    </a-modal>
  </a-layout-header>
</template>

@@ -38,10 +49,11 @@
import HeaderAvatar from './HeaderAvatar'
import IMenu from '@/components/menu/menu'
import {mapState, mapMutations} from 'vuex'
import ChangePassword from '@/pages/user/components/changePwd';

export default {
  name: 'AdminHeader',
  components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch},
  components: {IMenu, HeaderAvatar, HeaderNotice, HeaderSearch, ChangePassword },
  props: ['collapsed', 'menuData'],
  data() {
    return {
@@ -50,7 +62,8 @@
        // {key: 'HK', name: '繁體中文', alias: '繁體'},
        // {key: 'US', name: 'English', alias: 'English'}
      ],
      searchActive: false
      searchActive: false,
      changePwdShow: false,
    }
  },
  computed: {
@@ -79,6 +92,12 @@
    onSelect (obj) {
      this.$emit('menuSelect', obj)
    },
    changePwd () {
      this.changePwdShow = true;
    },
    cancel () {
      this.changePwdShow = false;
    },
    ...mapMutations('setting', ['setLang'])
  }
}

 src/layouts/header/HeaderAvatar.vue

@@ -1,21 +1,17 @@
<template>
  <a-dropdown>
    <div class="header-avatar" style="cursor: pointer">
      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar"/>
      <span class="name">{{user.name}}</span>
      <a-avatar class="avatar" size="small" shape="circle" :src="user.avatar" />
      <span class="name">{{ user.name }}</span>
    </div>
    <a-menu :class="['avatar-menu']" slot="overlay">
      <a-menu-item>
      <a-menu-item @click="changePwd">
        <a-icon type="user" />
        <span>个人中心</span>
      </a-menu-item>
      <a-menu-item>
        <a-icon type="setting" />
        <span>设置</span>
        <span>修改密码</span>
      </a-menu-item>
      <a-menu-divider />
      <a-menu-item @click="logout">
        <a-icon style="margin-right: 8px;" type="poweroff" />
        <a-icon style="margin-right: 8px" type="poweroff" />
        <span>退出登录</span>
      </a-menu-item>
    </a-menu>
@@ -23,38 +19,41 @@
</template>

<script>
import {mapGetters} from 'vuex'
import {logout} from '@/services/user'
import { mapGetters } from "vuex";
import { logout } from "@/services/user";

export default {
  name: 'HeaderAvatar',
  name: "HeaderAvatar",
  computed: {
    ...mapGetters('account', ['user']),
    ...mapGetters("account", ["user"]),
  },
  methods: {
    logout() {
      logout()
      this.$router.push('/login')
    }
  }
}
      logout();
      this.$router.push("/login");
    },
    changePwd() {
      this.$emit('changepwd');
    },
  },
};
</script>

<style lang="less">
  .header-avatar{
    display: inline-flex;
    .avatar, .name{
      align-self: center;
    }
    .avatar{
      margin-right: 8px;
    }
    .name{
      font-weight: 500;
    }
.header-avatar {
  display: inline-flex;
  .avatar,
  .name {
    align-self: center;
  }
  .avatar-menu{
    width: 150px;
  .avatar {
    margin-right: 8px;
  }

  .name {
    font-weight: 500;
  }
}
.avatar-menu {
  width: 150px;
}
</style>

 src/pages/user/components/changePwd.vue

New file
@@ -0,0 +1,122 @@
<template>
  <div class="">
    <a-form-model
      ref="formRef"
      name="advanced_search"
      class="ant-advanced-search-form"
      :model="form"
      :rules="rules"
    >
      <a-layout>
        <a-layout-content>
          <a-col :span="24">
            <a-form-model-item
              label="原密码"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 17, offset: 1 }"
              prop="oldPwd"
            >
            <a-input-password v-model="form.oldPwd" placeholder="请输入原密码" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              label="新密码"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 17, offset: 1 }"
              prop="pwd"
            >
            <a-input-password v-model="form.pwd" placeholder="请输入新密码" />
            </a-form-model-item>
          </a-col>
          <a-col :span="24">
            <a-form-model-item
              label="确认密码"
              :labelCol="{ span: 5 }"
              :wrapperCol="{ span: 17, offset: 1 }"
              prop="pwd1"
            >
            <a-input-password v-model="form.pwd1" placeholder="请再次输入新密码" />
            </a-form-model-item>
          </a-col>
        </a-layout-content>
        <a-layout-footer class="footer">
          <a-button key="back" @click="submit">确定</a-button>
          <a-button key="cancel" @click="cancel">取消</a-button>
        </a-layout-footer>
      </a-layout>
    </a-form-model>
  </div>
</template>

<script>
// import {
//   editUser,
// } from "../apis";
export default {
  name: "",
  data() {
    return {
      form: {
        oldPwd: "",
        pwd: "",
        pwd1: "",
      },
      rules: {
        oldPwd: [
          {
            required: true,
            message: "请输入原密码",
            trigger: "blur",
          },
        ],
        pwd: [
          {
            required: true,
            message: "请输入新密码",
            trigger: "blur",
          },
        ],
        pwd1: [
          {
            required: true,
            message: "请再输入一次新密码",
            trigger: "blur",
          },
          {
            pattern: /^\S{8,}$/,
            message: "密码最少8位",
            trigger: "blur",
          },
        ],
      },
    };
  },
  components: {},
  methods: {
    submit() {
      console.log("close");
    },
    cancel() {
      this.$emit("close");
    }
  },

  mounted() {
    this.resetFields();
  },
};
</script>

<style scoped>
.transbg {
  background: transparent;
}
.footer {
  padding: 4px;
  text-align: right;
}
.footer button + button {
  margin-left: 8px;
}
</style>

 yarn.lock

@@ -6101,6 +6101,11 @@
  resolved "https://registry.npm.taobao.org/js-cookie/download/js-cookie-2.2.1.tgz#69e106dc5d5806894562902aa5baec3744e9b2b8"
  integrity sha1-aeEG3F1YBolFYpAqpbrsN0Tpsrg=

js-md5@^0.7.3:
  version "0.7.3"
  resolved "https://registry.yarnpkg.com/js-md5/-/js-md5-0.7.3.tgz#b4f2fbb0b327455f598d6727e38ec272cd09c3f2"
  integrity sha512-ZC41vPSTLKGwIRjqDh8DfXoCrdQIyBgspJVPXHBGu4nZlAEvG3nf+jO9avM9RmLiGakg7vz974ms99nEV0tmTQ==

js-message@1.0.5:
  version "1.0.5"
  resolved "https://registry.npm.taobao.org/js-message/download/js-message-1.0.5.tgz#2300d24b1af08e89dd095bc1a4c9c9cfcb892d15"