feat: 登录强制校验弱密码&关键信息加密传输

2025-11-03 16:00:25 +08:00 · 2022-07-18 20:36:31 +08:00
parent db554ebdc9
commit 5271bd21e8
29 changed files with 1804 additions and 1327 deletions
--- a/mayfly_go_web/package.json
+++ b/mayfly_go_web/package.json
@@ -14,6 +14,7 @@
    "cropperjs": "^1.5.11",
    "echarts": "^5.3.3",
    "element-plus": "^2.2.9",
+    "jsencrypt": "^3.2.1",
    "jsoneditor": "^9.9.0",
    "lodash": "^4.17.21",
    "mitt": "^3.0.0",
@@ -23,7 +24,7 @@
    "sql-formatter": "^7.0.3",
    "vue": "^3.2.37",
    "vue-clipboard3": "^1.0.1",
-    "vue-router": "^4.0.16",
+    "vue-router": "^4.1.2",
    "vuex": "^4.0.2",
    "xterm": "^4.19.0",
    "xterm-addon-fit": "^0.5.0"
--- a/mayfly_go_web/src/common/openApi.ts
+++ b/mayfly_go_web/src/common/openApi.ts
@@ -2,6 +2,8 @@ import request from './request'

 export default {
    login: (param: any) => request.request('POST', '/sys/accounts/login', param, null),
+    changePwd: (param: any) => request.request('POST', '/sys/accounts/change-pwd', param, null),
+    getPublicKey: () => request.request('GET', '/common/public-key', null, null),
    captcha: () => request.request('GET', '/sys/captcha', null, null),
    logout: (param: any) => request.request('POST', '/sys/accounts/logout/{token}', param, null),
    getMenuRoute: (param: any) => request.request('Get', '/sys/resources/account', param, null)
--- a/mayfly_go_web/src/common/rsa.ts
+++ b/mayfly_go_web/src/common/rsa.ts
@@ -0,0 +1,37 @@
+import openApi from './openApi';
+import JSEncrypt from 'jsencrypt'
+import { notBlank } from './assert';
+
+var encryptor: any = null
+
+export async function getRsaPublicKey() {
+    let publicKey = sessionStorage.getItem('RsaPublicKey')
+    if (publicKey) {
+        return publicKey
+    }
+    publicKey = await openApi.getPublicKey() as string
+    sessionStorage.setItem('RsaPublicKey', publicKey)
+    return publicKey
+}
+
+/**
+ * 公钥加密指定值
+ * 
+ * @param value value
+ * @returns 加密后的值
+ */
+export async function RsaEncrypt(value: any) {
+    // 不存在则返回空值
+    if (!value) {
+        return ""
+    }
+    if (encryptor != null) {
+        return encryptor.encrypt(value)
+    }
+    console.log(value)
+    encryptor = new JSEncrypt()
+    const publicKey = await getRsaPublicKey() as string;
+    notBlank(publicKey, "获取公钥失败")
+    encryptor.setPublicKey(publicKey)//设置公钥
+    return encryptor.encrypt(value)
+}
--- a/mayfly_go_web/src/views/login/component/AccountLogin.vue
+++ b/mayfly_go_web/src/views/login/component/AccountLogin.vue
@@ -1,54 +1,75 @@
 <template>
-    <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-content-form" size="large">
-        <el-form-item prop="username">
-            <el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable autocomplete="off">
-            </el-input>
-        </el-form-item>
-        <el-form-item prop="password">
-            <el-input
-                type="password"
-                placeholder="请输入密码"
-                prefix-icon="lock"
-                v-model="loginForm.password"
-                autocomplete="off"
-                show-password
-            >
-            </el-input>
-        </el-form-item>
-        <el-form-item prop="captcha">
-            <el-row :gutter="15">
-                <el-col :span="16">
+    <div>
+        <el-form ref="loginFormRef" :model="loginForm" :rules="rules" class="login-content-form" size="large">
+            <el-form-item prop="username">
+                <el-input type="text" placeholder="请输入用户名" prefix-icon="user" v-model="loginForm.username" clearable autocomplete="off">
+                </el-input>
+            </el-form-item>
+            <el-form-item prop="password">
+                <el-input type="password" placeholder="请输入密码" prefix-icon="lock" v-model="loginForm.password" autocomplete="off" show-password>
+                </el-input>
+            </el-form-item>
+            <el-form-item prop="captcha">
+                <el-row :gutter="15">
+                    <el-col :span="16">
+                        <el-input
+                            type="text"
+                            maxlength="6"
+                            placeholder="请输入验证码"
+                            prefix-icon="position"
+                            v-model="loginForm.captcha"
+                            clearable
+                            autocomplete="off"
+                            @keyup.enter="login"
+                        ></el-input>
+                    </el-col>
+                    <el-col :span="8">
+                        <div class="login-content-code">
+                            <img
+                                class="login-content-code-img"
+                                @click="getCaptcha"
+                                width="130px"
+                                height="40px"
+                                :src="captchaImage"
+                                style="cursor: pointer"
+                            />
+                        </div>
+                    </el-col>
+                </el-row>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" class="login-content-submit" round @click="login" :loading="loading.signIn">
+                    <span>登 录</span>
+                </el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-dialog title="修改密码" v-model="changePwdDialog.visible" :close-on-click-modal="false" width="450px" :destroy-on-close="true">
+            <el-form :model="changePwdDialog.form" :rules="changePwdDialog.rules" ref="changePwdFormRef" label-width="65px">
+                <el-form-item prop="username" label="用户名" required>
+                    <el-input v-model.trim="changePwdDialog.form.username" disabled></el-input>
+                </el-form-item>
+                <el-form-item prop="oldPassword" label="旧密码" required>
+                    <el-input v-model.trim="changePwdDialog.form.oldPassword" autocomplete="new-password" type="password"></el-input>
+                </el-form-item>
+                <el-form-item prop="newPassword" label="新密码" required>
                    <el-input
-                        type="text"
-                        maxlength="6"
-                        placeholder="请输入验证码"
-                        prefix-icon="position"
-                        v-model="loginForm.captcha"
-                        clearable
-                        autocomplete="off"
-                        @keyup.enter="login"
+                        v-model.trim="changePwdDialog.form.newPassword"
+                        placeholder="须为8位以上且包含字⺟⼤⼩写+数字+特殊符号"
+                        type="password"
+                        autocomplete="new-password"
                    ></el-input>
-                </el-col>
-                <el-col :span="8">
-                    <div class="login-content-code">
-                        <img
-                            class="login-content-code-img"
-                            @click="getCaptcha"
-                            width="130px"
-                            height="40px"
-                            :src="captchaImage"
-                            style="cursor: pointer"
-                        />
-                    </div>
-                </el-col>
-            </el-row>
-        </el-form-item>
-        <el-form-item>
-            <el-button type="primary" class="login-content-submit" round @click="login" :loading="loading.signIn">
-                <span>登 录</span>
-            </el-button>
-        </el-form-item>
-    </el-form>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="cancelChangePwd">取 消</el-button>
+                    <el-button @click="changePwd" type="primary" :loading="loading.changePwd">确 定</el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
 </template>

 <script lang="ts">
@@ -60,7 +81,9 @@ import { useStore } from '@/store/index.ts';
 import { setSession } from '@/common/utils/storage.ts';
 import { formatAxis } from '@/common/utils/formatTime.ts';
 import openApi from '@/common/openApi';
+import { RsaEncrypt } from '@/common/rsa';
 import { letterAvatar } from '@/common/utils/string';
+
 export default defineComponent({
    name: 'AccountLogin',
    setup() {
@@ -68,6 +91,8 @@ export default defineComponent({
        const route = useRoute();
        const router = useRouter();
        const loginFormRef: any = ref(null);
+        const changePwdFormRef: any = ref(null);
+
        const state = reactive({
            captchaImage: '',
            loginForm: {
@@ -76,6 +101,24 @@ export default defineComponent({
                captcha: '',
                cid: '',
            },
+            changePwdDialog: {
+                visible: false,
+                form: {
+                    username: '',
+                    oldPassword: '',
+                    newPassword: '',
+                },
+                rules: {
+                    newPassword: [
+                        { required: true, message: '请输入新密码', trigger: 'blur' },
+                        {
+                            pattern: /^(?=.*[A-Za-z])(?=.*\d)(?=.*[`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]])[A-Za-z\d`~!@#$%^&*()_+<>?:"{},.\/\\;'[\]]{8,}$/,
+                            message: '须为8位以上且包含字⺟⼤⼩写+数字+特殊符号',
+                            trigger: 'blur',
+                        },
+                    ],
+                },
+            },
            rules: {
                username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
                password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
@@ -83,6 +126,7 @@ export default defineComponent({
            },
            loading: {
                signIn: false,
+                changePwd: false,
            },
        });

@@ -116,15 +160,26 @@ export default defineComponent({
        const onSignIn = async () => {
            state.loading.signIn = true;
            let loginRes;
+            const originPwd = state.loginForm.password;
            try {
-                loginRes = await openApi.login(state.loginForm);
-                // // 存储 token 到浏览器缓存
+                const loginReq = { ...state.loginForm };
+                loginReq.password = await RsaEncrypt(originPwd);
+                loginRes = await openApi.login(loginReq);
+                // 存储 token 到浏览器缓存
                setSession('token', loginRes.token);
                setSession('menus', loginRes.menus);
-            } catch (e) {
+            } catch (e: any) {
                state.loading.signIn = false;
                state.loginForm.captcha = '';
-                getCaptcha();
+                // 密码强度不足
+                if (e.code && e.code == 401) {
+                    state.changePwdDialog.form.username = state.loginForm.username;
+                    state.changePwdDialog.form.oldPassword = originPwd;
+                    state.changePwdDialog.form.newPassword = '';
+                    state.changePwdDialog.visible = true;
+                } else {
+                    getCaptcha();
+                }
                return;
            }
            // 用户信息
@@ -174,11 +229,44 @@ export default defineComponent({
            }, 300);
        };

+        const changePwd = () => {
+            changePwdFormRef.value.validate(async (valid: boolean) => {
+                if (!valid) {
+                    return false;
+                }
+                try {
+                    state.loading.changePwd = true;
+                    const form = state.changePwdDialog.form;
+                    const changePwdReq: any = { ...form };
+                    changePwdReq.oldPassword = await RsaEncrypt(form.oldPassword);
+                    changePwdReq.newPassword = await RsaEncrypt(form.newPassword);
+                    await openApi.changePwd(changePwdReq);
+                    ElMessage.success('密码修改成功, 新密码已填充至登录密码框');
+                    state.loginForm.password = state.changePwdDialog.form.newPassword;
+                    state.changePwdDialog.visible = false;
+                    getCaptcha();
+                } finally {
+                    state.loading.changePwd = false;
+                }
+            });
+        };
+
+        const cancelChangePwd = () => {
+            state.changePwdDialog.visible = false;
+            state.changePwdDialog.form.newPassword = '';
+            state.changePwdDialog.form.oldPassword = '';
+            state.changePwdDialog.form.username = '';
+            getCaptcha();
+        };
+
        return {
            getCaptcha,
            currentTime,
            loginFormRef,
+            changePwdFormRef,
            login,
+            changePwd,
+            cancelChangePwd,
            ...toRefs(state),
        };
    },
--- a/mayfly_go_web/src/views/ops/db/DbEdit.vue
+++ b/mayfly_go_web/src/views/ops/db/DbEdit.vue
@@ -26,7 +26,7 @@
                    <el-input v-model.trim="form.host" placeholder="请输入主机ip" auto-complete="off"></el-input>
                </el-form-item>
                <el-form-item prop="port" label="port:" required>
-                    <el-input type="number" v-model.trim="form.port" placeholder="请输入端口"></el-input>
+                    <el-input type="number" v-model.number="form.port" placeholder="请输入端口"></el-input>
                </el-form-item>
                <el-form-item prop="username" label="用户名:" required>
                    <el-input v-model.trim="form.username" placeholder="请输入用户名"></el-input>
@@ -86,6 +86,7 @@ import { projectApi } from '../project/api.ts';
 import { ElMessage } from 'element-plus';
 import type { ElInput } from 'element-plus';
 import { notBlank } from '@/common/assert';
+import { RsaEncrypt } from '@/common/rsa';

 export default defineComponent({
    name: 'DbEdit',
@@ -259,10 +260,11 @@ export default defineComponent({
            if (!state.form.id) {
                notBlank(state.form.password, '新增操作，密码不可为空');
            }
-            dbForm.value.validate((valid: boolean) => {
+            dbForm.value.validate(async (valid: boolean) => {
                if (valid) {
-                    state.form.port = Number.parseInt(state.form.port as any);
-                    dbApi.saveDb.request(state.form).then(() => {
+                    const reqForm = { ...state.form };
+                    reqForm.password = await RsaEncrypt(reqForm.password);
+                    dbApi.saveDb.request(reqForm).then(() => {
                        ElMessage.success('保存成功');
                        emit('val-change', state.form);
                        state.btnLoading = true;
--- a/mayfly_go_web/src/views/ops/machine/MachineEdit.vue
+++ b/mayfly_go_web/src/views/ops/machine/MachineEdit.vue
@@ -48,6 +48,7 @@ import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
 import { machineApi } from './api';
 import { ElMessage } from 'element-plus';
 import { notBlank } from '@/common/assert';
+import { RsaEncrypt } from '@/common/rsa';

 export default defineComponent({
    name: 'MachineEdit',
@@ -76,8 +77,8 @@ export default defineComponent({
                projectName: null,
                name: null,
                port: 22,
-                username: null,
-                password: null,
+                username: "",
+                password: "",
                remark: '',
            },
            btnLoading: false,
@@ -149,9 +150,11 @@ export default defineComponent({
            if (!state.form.id) {
                notBlank(state.form.password, '新增操作，密码不可为空');
            }
-            machineForm.value.validate((valid: boolean) => {
+            machineForm.value.validate(async (valid: boolean) => {
                if (valid) {
-                    machineApi.saveMachine.request(state.form).then(() => {
+                    const reqForm = { ...state.form };
+                    reqForm.password = await RsaEncrypt(state.form.password);
+                    machineApi.saveMachine.request(reqForm).then(() => {
                        ElMessage.success('保存成功');
                        emit('val-change', state.form);
                        state.btnLoading = true;
--- a/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoDataOp.vue
@@ -15,7 +15,7 @@
                            </el-form-item>

                            <el-form-item label="库" label-width="20px">
-                                <el-select v-model="database" placeholder="请选择库" @change="changeDatabase">
+                                <el-select v-model="database" placeholder="请选择库" @change="changeDatabase" filterable>
                                    <el-option v-for="item in databases" :key="item.Name" :label="item.Name" :value="item.Name">
                                        <span style="float: left">{{ item.Name }}</span>
                                        <span style="float: right; color: #8492a6; margin-left: 4px; font-size: 13px">{{
@@ -26,12 +26,8 @@
                            </el-form-item>

                            <el-form-item label="集合" label-width="40px">
-                                <el-select v-model="collection" placeholder="请选择集合" @change="changeCollection">
+                                <el-select v-model="collection" placeholder="请选择集合" @change="changeCollection" filterable>
                                    <el-option v-for="item in collections" :key="item" :label="item" :value="item">
-                                        <!-- <span style="float: left">{{ item.uri }}</span>
-                                            <span style="float: right; color: #8492a6; margin-left: 6px; font-size: 13px">{{
-                                                ` [${item.name}]`
-                                            }}</span> -->
                                    </el-option>
                                </el-select>
                            </el-form-item>
--- a/mayfly_go_web/src/views/ops/mongo/MongoEdit.vue
+++ b/mayfly_go_web/src/views/ops/mongo/MongoEdit.vue
@@ -42,6 +42,7 @@ import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
 import { mongoApi } from './api';
 import { projectApi } from '../project/api.ts';
 import { ElMessage } from 'element-plus';
+import { RsaEncrypt } from '@/common/rsa';

 export default defineComponent({
    name: 'MongoEdit',
@@ -144,9 +145,11 @@ export default defineComponent({
        };

        const btnOk = async () => {
-            mongoForm.value.validate((valid: boolean) => {
+            mongoForm.value.validate(async (valid: boolean) => {
                if (valid) {
-                    mongoApi.saveMongo.request(state.form).then(() => {
+                    const reqForm = { ...state.form };
+                    reqForm.uri = await RsaEncrypt(reqForm.uri);
+                    mongoApi.saveMongo.request(reqForm).then(() => {
                        ElMessage.success('保存成功');
                        emit('val-change', state.form);
                        state.btnLoading = true;
--- a/mayfly_go_web/src/views/ops/redis/RedisEdit.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisEdit.vue
@@ -20,14 +20,19 @@
                    </el-select>
                </el-form-item>
                <el-form-item prop="host" label="host:" required>
-                    <el-input v-model.trim="form.host" placeholder="请输入host:port，集群模式用','分割" auto-complete="off" type="textarea"></el-input>
+                    <el-input
+                        v-model.trim="form.host"
+                        placeholder="请输入host:port，集群模式用','分割"
+                        auto-complete="off"
+                        type="textarea"
+                    ></el-input>
                </el-form-item>
                <el-form-item prop="password" label="密码:">
                    <el-input
                        type="password"
                        show-password
                        v-model.trim="form.password"
-                        placeholder="请输入密码"
+                        placeholder="请输入密码, 修改操作可不填"
                        autocomplete="new-password"
                    ></el-input>
                </el-form-item>
@@ -42,7 +47,7 @@
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="cancel()">取 消</el-button>
-                     <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
+                    <el-button type="primary" :loading="btnLoading" @click="btnOk">确 定</el-button>
                </div>
            </template>
        </el-dialog>
@@ -54,6 +59,7 @@ import { toRefs, reactive, watch, defineComponent, ref } from 'vue';
 import { redisApi } from './api';
 import { projectApi } from '../project/api.ts';
 import { ElMessage } from 'element-plus';
+import { RsaEncrypt } from '@/common/rsa';

 export default defineComponent({
    name: 'RedisEdit',
@@ -80,14 +86,14 @@ export default defineComponent({
            form: {
                id: null,
                name: null,
-                mode: "standalone",
+                mode: 'standalone',
                host: null,
                password: null,
                project: null,
                projectId: null,
                envId: null,
                env: null,
-                remark: "",
+                remark: '',
            },
            btnLoading: false,
            rules: {
@@ -166,9 +172,11 @@ export default defineComponent({
        };

        const btnOk = async () => {
-            redisForm.value.validate((valid: boolean) => {
+            redisForm.value.validate(async (valid: boolean) => {
                if (valid) {
-                    redisApi.saveRedis.request(state.form).then(() => {
+                    const reqForm = { ...state.form };
+                    reqForm.password = await RsaEncrypt(reqForm.password);
+                    redisApi.saveRedis.request(reqForm).then(() => {
                        ElMessage.success('保存成功');
                        emit('val-change', state.form);
                        state.btnLoading = true;
--- a/mayfly_go_web/src/views/ops/redis/RedisList.vue
+++ b/mayfly_go_web/src/views/ops/redis/RedisList.vue
@@ -22,7 +22,7 @@
                <el-table-column prop="env" label="环境" min-width="100"></el-table-column>
                <el-table-column prop="host" label="host:port" min-width="150" show-overflow-tooltip> </el-table-column>
                <el-table-column prop="mode" label="mode" min-width="100"></el-table-column>
-                <el-table-column prop="remark" label="备注" min-width="100"></el-table-column>
+                <el-table-column prop="remark" label="备注" min-width="120" show-overflow-tooltip></el-table-column>
                <el-table-column prop="createTime" label="创建时间" min-width="160">
                    <template #default="scope">
                        {{ $filters.dateFormat(scope.row.createTime) }}
--- a/mayfly_go_web/yarn.lock
+++ b/mayfly_go_web/yarn.lock