修改密码

马宇豪

2024-11-05 1f26c30a8d1c5e3d9ab262b382284c8ea96f29b2

修改密码

 src/api/systemManage/menu/index.ts

@@ -17,7 +17,7 @@
        // },
        getMenuAdmin: () => {
            return request({
                url: import.meta.env.VITE_API_URL + `/sys/console/menu/get/all`,
                url: import.meta.env.VITE_API_URL + `/sys/menu/get/u`,
                method: 'get'
            });
        },

 src/api/systemManage/user/index.ts

@@ -69,6 +69,21 @@
                url: import.meta.env.VITE_API_URL + `/account/list`,
                method: 'get'
            });
        }
        },

        modPwd: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/account/user/update/password`,
                method: 'post',
                data: data
            });
        },
        resetPwd: (data: object) => {
            return request({
                url: import.meta.env.VITE_API_URL + `/account/user/update/resetPassword`,
                method: 'post',
                data: data
            });
        },
    };
}

 src/layout/navBars/breadcrumb/user.vue

@@ -67,7 +67,7 @@
                <template #dropdown>
                    <el-dropdown-menu>
                        <el-dropdown-item command="/project">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
                        <!--                    <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>-->
                        <el-dropdown-item @click="openResetPwd">修改密码</el-dropdown-item>
                        <!--                    <el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>-->
                        <!--                    <el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>-->
                        <!--                    <el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>-->
@@ -75,6 +75,7 @@
                    </el-dropdown-menu>
                </template>
            </el-dropdown>
            <reset-pwd ref="pwdRef"></reset-pwd>
            <Search ref="searchRef" />
        </div>
    </div>
@@ -103,10 +104,11 @@
import { dynamicRoutes } from '/@/router/route';
import Cookies from 'js-cookie';
import {useRoutesList} from "/@/stores/routesList";
import ResetPwd from "/@/views/system/user/component/resetPwd.vue";

export default defineComponent({
    name: 'layoutBreadcrumbUser',
    components: { UserNews, Search },
    components: { UserNews, Search, ResetPwd},
    setup() {
        const { t } = useI18n();
        const { proxy } = <any>getCurrentInstance();
@@ -117,6 +119,7 @@
        const { userInfos } = storeToRefs(stores);
        const { themeConfig } = storeToRefs(storesThemeConfig);
        const searchRef = ref();
        const pwdRef = ref()
        const state = reactive({
            isScreenfull: false,
            disabledI18n: 'zh-cn',
@@ -199,6 +202,10 @@
        const onSearchClick = () => {
            searchRef.value.openSearch();
        };

        const openResetPwd = () => {
          pwdRef.value.openDialog()
        }
        // 组件大小改变
        const onComponentSizeChange = (size: string) => {
            Local.remove('themeConfig');
@@ -282,6 +289,7 @@
        return {
            userInfos,
            toHome,
            openResetPwd,
            onLayoutSetingClick,
            onHandleCommandClick,
            onScreenfullClick,
@@ -289,6 +297,7 @@
            onComponentSizeChange,
            onLanguageChange,
            searchRef,
            pwdRef,
            layoutUserFlexNum,
            ...toRefs(state)
        };

 src/utils/toolsValidate.ts

@@ -256,9 +256,10 @@
 * @param val 当前值字符串
 * @returns 返回 true: 强密码正确
 */
export function verifyPasswordPowerful(val: string) {

export function verifyPwd(val: string) {
    // false: 强密码不正确
    if (!/^(?![a-zA-z]+$)(?!\d+$)(?![!@#$%^&\.*]+$)(?![a-zA-z\d]+$)(?![a-zA-z!@#$%^&\.*]+$)(?![\d!@#$%^&\.*]+$)[a-zA-Z\d!@#$%^&\.*]{6,16}$/.test(val)) return false;
    if (!/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[.\-/!@#$%^&*()_+])[A-Za-z\d.\-/!@#$%^&*()_+]{8,}$/.test(val)) return false;
    // true: 强密码正确
    else return true;
}

 src/views/loginPage/component/accountLogin.vue

@@ -19,7 +19,7 @@
        </el-form-item>
        <el-form-item class="login-animation4 codeDeal">
            <el-checkbox v-model="saveCode" label="记住密码" size="large" />
            <span class="forgetCode" @click="identify">忘记密码？</span>
<!--            <span class="forgetCode" @click="identify">忘记密码？</span>-->
        </el-form-item>
        <div class="btnBox">
            <el-button type="primary" class="login-content-submit" round @click="onSignIn" :loading="loading.signIn">

 src/views/loginPage/loginPage.vue

@@ -169,7 +169,7 @@
              letter-spacing: 6px;
              white-space: nowrap;
              position: relative;
              z-index: 9999;
              z-index: 999;
              text-shadow: 0 3px 5px rgba(72,91,212,.4);
            }


 src/views/system/user/component/resetPwd.vue

对比新文件
@@ -0,0 +1,155 @@
<template>
    <el-dialog title="修改" v-model="isShowUserDialog" width="400px">
      <el-form :model="userForm" size="default" ref="userRef" :rules="userFormRules" label-width="100px">
        <el-row :gutter="35">
          <el-col class="mb20">
            <el-form-item label="原密码" prop="oldPwd">
              <el-input v-model.trim="userForm.oldPwd" placeholder="原密码" type="password" show-password>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="mb20">
            <el-form-item label="新密码" prop="newPwd">
              <el-input v-model.trim="userForm.newPwd" placeholder="新密码" type="password" show-password>
              </el-input>
            </el-form-item>
          </el-col>
          <el-col class="mb20">
            <el-form-item label="确认新密码" prop="reNewPwd">
              <el-input v-model.trim="userForm.reNewPwd" placeholder="再次确认新密码" type="password" show-password>
              </el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
              <span class="dialog-footer">
                  <el-button @click="isShowUserDialog = !isShowUserDialog" size="default">取 消</el-button>
                  <el-button type="primary" v-throttle @click="onSubmit" size="default">确 定</el-button>
              </span>
      </template>
    </el-dialog>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { userApi } from '/@/api/systemManage/user'
import {verifyPwd} from "/@/utils/toolsValidate"
import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
import {useLoginApi} from "/@/api/login";
import {Session} from "/@/utils/storage";
const userInfo = useUserInfo();
const { userInfos } = storeToRefs(userInfo);
interface UserState {
  isShowUserDialog: boolean;
  userForm: {
    uid: null | number | string,
    oldPwd: string,
    newPwd: string,
    reNewPwd: string
  };
  userFormRules:{},
}

export default defineComponent({
  name: 'pwdDialog',
  setup(props, context) {
    const userRef = ref()
    const validatePwd = (rule: any, value: any, callback: any)=>{
      if(value === ''){
        callback(new Error('请输入密码'))
      }else{
        if(!verifyPwd(value)){
          callback(new Error('密码须包含大小写字母、数字、特殊字符，长度不少于8位'))
        }else{
          callback()
        }
      }
    }

    const validatePass2 = (rule: any, value: any, callback: any) => {
      if (value === '') {
        callback(new Error('该内容不能为空'))
      } else if (value !== state.userForm.newPwd) {
        callback(new Error("两次输入的密码不一致!"))
      } else {
        callback()
      }
    }

    const state = reactive<UserState>({
      isShowUserDialog: false,
      userForm: {
        uid: null,
        oldPwd: '',
        newPwd: '',
        reNewPwd: ''
      },
      userFormRules:{
        oldPwd: [{ required: true, message: '该内容不能为空', trigger: 'blur' }],
        newPwd: [{ required: true, validator: validatePwd, trigger: 'blur' }],
        reNewPwd: [{ required: true, validator: validatePass2, trigger: 'blur' }],
      },
    })


    // 打开弹窗
    const openDialog = () => {
      state.userForm = {
        uid: null,
        oldPwd: '',
        newPwd: '',
        reNewPwd: ''
      }
      state.isShowUserDialog = true
      state.userForm.uid = Number(userInfos.value.uid)
    }

    // 新增修改
    const onSubmit = async () => {
      userRef.value.validate(async (valid:Boolean) => {
        if(valid){
          const {reNewPwd,...data} = state.userForm
          const res = await userApi().modPwd(data)
          if(res.data.code == 100){
            ElMessage({
              type:'success',
              message: '密码修改成功,需重新登录'
            })
            useLoginApi()
                .signOut()
                .then(() => {
                  Session.clear();
                  window.location.href = '/';
                });
          }else{
            ElMessage({
              type:'warning',
              message: res.data.msg
            })
          }
        }else{
          ElMessage({
            type:'warning',
            message:'请完善基本信息'
          })
        }
      })

    }

    // 页面加载时
    onMounted(() => {

    });
    return {
      userRef,
      openDialog,
      onSubmit,
      ...toRefs(state)
    };
  }
});
</script>

 src/views/system/user/index.vue

@@ -44,8 +44,9 @@
                <el-table-column prop="idSerial" label="证件号码"></el-table-column>
                <el-table-column label="操作" width="100">
                    <template #default="scope">
                        <el-button :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改', scope.row)">修改</el-button>
                        <el-button style="color: red" :disabled="scope.row.userName === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                        <el-button :disabled="scope.row.name === 'admin'" size="small" text type="primary" @click="onOpenUserDialog('修改', scope.row)">修改</el-button>
                        <el-button style="color: red" :disabled="scope.row.name === 'admin'" size="small" text type="primary" @click="onRowDel(scope.row)">删除</el-button>
                      <el-button v-if="scope.row.name !== 'admin'" style="color: red" :disabled="!isAdmin" size="small" text type="primary" @click="onResetPwd(scope.row)">重置密码</el-button>
                    </template>
                </el-table-column>
            </el-table>
@@ -65,7 +66,10 @@
import { userApi } from '/@/api/systemManage/user';
import { departmentApi } from '/@/api/systemManage/department';
import { useRoleApi } from '/@/api/systemManage/role';

import {useUserInfo} from "/@/stores/userInfo";
import {storeToRefs} from "pinia";
const userInfo = useUserInfo();
const { userInfos } = storeToRefs(userInfo);
// 定义接口来定义对象的类型
interface TableDataRow {
    userName: string;
@@ -87,6 +91,7 @@
}

interface TableDataState {
    isAdmin: boolean
    userTableData: {
        data: Array<TableDataRow>;
        total: number;
@@ -115,6 +120,7 @@
    setup() {
        const userRef = ref();
        const state = reactive<TableDataState>({
            isAdmin: false,
            userTableData: {
                data: [],
                total: 0,
@@ -168,6 +174,31 @@

      const searchByName = ()=>{
        initUserTableData()
      }

      const onResetPwd = (row: TableDataRow)=>{
        ElMessageBox.confirm(`此操作将重置：“${row.name}”的密码，是否继续?`, '提示', {
          confirmButtonText: '确认',
          cancelButtonText: '取消',
          type: 'warning'
        })
            .then(async () => {
              let res = await userApi().resetPwd({uid: row.id});
              if (res.data.code === 100) {
                ElMessage({
                  type: 'success',
                  duration: 2000,
                  message: '密码重置成功'
                });
                await initUserTableData();
              } else {
                ElMessage({
                  type: 'warning',
                  message: res.data.msg
                });
              }
            })
            .catch(() => {});
      }

        const reset = () =>{
@@ -267,9 +298,15 @@
            getRoleData();
            getExpertsData();
            getDepList()
            if(userInfos.value.roles.find(i=>i.roleId == 6 || i.roleId == 7)){
              state.isAdmin = true
            }else{
              state.isAdmin = false
            }
        });
        return {
            userRef,
          onResetPwd,
            reset,
            onOpenUserDialog,
            onRowDel,