新增 修改密码强制安全策略

Author: yumao233

src/app/views/UserDetail.vue

@@ -64,66 +64,8 @@
     </el-col>
   </el-row>
   <el-row :gutter="20">
-    <el-col :md="16" :offset="0">
-      <Panel>
-        <template #title>用户名</template>
-        <template #default>
-          <div class="sub-title row-mt">
-            <p class="sub-title-title">更改用户名</p>
-            <p class="sub-title-info">支持中文和字母，长度为 2 到 18 个文字</p>
-          </div>
-          <el-input
-            size="small"
-            placeholder="保持原值"
-            v-model="userData.userName"
-            :readonly="readonly.a"
-            @focus="() => (readonly.a = false)"
-            autocomplete="off"
-          ></el-input>
-          <div style="text-align: right">
-            <el-button size="small" class="row-mt" @click="update(1)">更新用户名</el-button>
-          </div>
-        </template>
-      </Panel>
-      <Panel>
-        <template #title>访问密码</template>
-        <template #default>
-          <div class="sub-title row-mt">
-            <p class="sub-title-title">新密码</p>
-            <p class="sub-title-info">长度必须 6 到 18 位，尽可能包含字母数字加符号组合方式</p>
-          </div>
-          <el-input
-            size="small"
-            type="password"
-            v-model="userData.passWord"
-            autocomplete="off"
-            placeholder="保持原值"
-            :readonly="readonly.b"
-            @focus="() => (readonly.b = false)"
-          >
-          </el-input>
-          <div class="sub-title row-mt">
-            <p class="sub-title-title">确认新密码</p>
-            <p class="sub-title-info">为防止新密码误输入，您必须确认一次新密码</p>
-          </div>
-          <el-input
-            size="small"
-            type="password"
-            v-model="userData.passWord2"
-            placeholder="保持原值"
-            :readonly="readonly.c"
-            @focus="() => (readonly.c = false)"
-            autocomplete="off"
-          >
-          </el-input>
-          <div style="text-align: right">
-            <el-button size="small" class="row-mt" @click="update(2)">更新密码</el-button>
-          </div>
-        </template>
-      </Panel>
-    </el-col>
     <el-col :md="8" :offset="0">
-      <Panel>
+      <Panel style="height: 300px">
         <template #title>注意事项</template>
         <template #default>
           <div class="sub-title">
@@ -146,7 +88,79 @@
           </div>
         </template>
       </Panel>
-      <Panel>
+    </el-col>
+    <el-col :md="8" :offset="0">
+      <!-- <Panel>
+        <template #title>用户名</template>
+        <template #default>
+          <div class="sub-title row-mt">
+            <p class="sub-title-title require-field">更改用户名</p>
+            <p class="sub-title-info">支持中文和字母，长度为 2 到 18 个文字</p>
+          </div>
+          <el-input
+            size="small"
+            placeholder="保持原值"
+            v-model="userData.userName"
+            :readonly="readonly.a"
+            @focus="() => (readonly.a = false)"
+            autocomplete="off"
+          ></el-input>
+          <div style="text-align: right">
+            <el-button size="small" class="row-mt" @click="update(1)" type="danger" plain
+              >更新用户名</el-button
+            >
+          </div>
+        </template>
+      </Panel> -->
+      <Panel style="height: 300px">
+        <template #title>更新密码</template>
+        <template #default>
+          <el-form
+            :model="userData"
+            :rules="rules"
+            label-position="top"
+            size="small"
+            ref="ruleFormRef"
+          >
+            <el-form-item label="新密码" prop="passWord" required>
+              <el-input
+                size="small"
+                type="password"
+                v-model="userData.passWord"
+                autocomplete="off"
+                :readonly="readonly.b"
+                placeholder="长度必须 12 到 24 位，尽可能包含字母数字加符号组合方式"
+                @focus="() => (readonly.b = false)"
+              >
+              </el-input>
+            </el-form-item>
+
+            <el-form-item label="确认新密码" prop="passWord2" required>
+              <el-input
+                size="small"
+                type="password"
+                v-model="userData.passWord2"
+                placeholder="保持原值"
+                :readonly="readonly.c"
+                @focus="() => (readonly.c = false)"
+                autocomplete="off"
+              >
+              </el-input>
+            </el-form-item>
+            <div style="text-align: right">
+              <el-form-item>
+                <el-button size="small" type="danger" plain class="row-mt" @click="update(2)">
+                  更新密码
+                </el-button>
+              </el-form-item>
+            </div>
+          </el-form>
+        </template>
+      </Panel>
+    </el-col>
+
+    <el-col :md="8" :offset="0">
+      <Panel style="height: 300px">
         <template #title>API 接口密钥</template>
         <template #default>
           <div class="sub-title row-mt">
@@ -210,6 +224,10 @@ export default {
       api: {
         enable: false,
         key: ""
+      },
+      rules: {
+        passWord: [{ validator: this.validatePassword, trigger: "blur" }],
+        passWord2: [{ validator: this.validatePassword, trigger: "blur" }]
       }
     };
   },
@@ -221,45 +239,31 @@ export default {
 
   async mounted() {},
   methods: {
-    async update(type) {
-      await this.$confirm("确定要更改此信息吗？", "警告", {
-        confirmButtonText: "确定",
-        cancelButtonText: "取消",
-        type: "warning"
-      });
-      const userName = this.userData.userName;
-      const passWord = this.userData.passWord;
-      const checkPassWord = this.userData.passWord2;
-      if (type === 1) {
-        if (userName.length > 18 || userName < 2)
-          return this.$message({
-            message: "用户名规则不正确，请检查后重试",
-            type: "error"
+    async update() {
+      await this.$refs.ruleFormRef.validate(async (valid) => {
+        if (!valid) return;
+        await this.$confirm("确定要更改此信息吗？", "警告", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning"
+        });
+        const passWord = this.userData.passWord;
+        try {
+          await request({
+            method: "PUT",
+            url: API_USER_UPDATE,
+            data: {
+              passWord
+            }
           });
-      }
-      if (type === 2) {
-        if (passWord.length > 18 || passWord.length < 6 || checkPassWord !== passWord)
-          return this.$message({
-            message: "密码规则不正确或两次密码不一致，请检查后重试",
+          this.$message({ message: "用户数据已更新", type: "success" });
+        } catch (error) {
+          this.$message({
+            message: "用户资料更新失败，可能是用户名冲突或服务器暂时不可用",
             type: "error"
           });
-      }
-      try {
-        await request({
-          method: "PUT",
-          url: API_USER_UPDATE,
-          data: {
-            userName,
-            passWord
-          }
-        });
-        this.$message({ message: "用户数据已更新", type: "success" });
-      } catch (error) {
-        this.$message({
-          message: "用户资料更新失败，可能是用户名冲突或服务器暂时不可用",
-          type: "error"
-        });
-      }
+        }
+      });
     },
 
     async changeApi(enable) {
@@ -279,6 +283,19 @@ export default {
           type: "error"
         });
       }
+    },
+    validatePassword(rule, value = "", callback) {
+      if (!value) return callback(new Error("请输入密码值，若不输入则不进行密码修改"));
+      if (value.length < 12 || value.length > 36)
+        return callback(new Error("密码长度不规范，必须长度在 12 位到 36 位之间"));
+      const reg = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)[0-9A-Za-z]{12,}$/;
+      if (!reg.test(value)) return callback(new Error("您的密码必须包含：数字，大写和小写字母"));
+      callback();
+    },
+    validatePassword2(rule, value = "", callback) {
+      if (value !== this.passWord) return callback(new Error("两次密码不一致"));
+
+      callback();
     }
   },
   components: { Panel, LineLabel }

src/app/views/Users.vue

@@ -155,7 +155,7 @@
     <template #default>
       <div>
         <div class="sub-title">
-          <p class="sub-title-title">用户昵称</p>
+          <p class="sub-title-title require-field">用户昵称</p>
           <p class="sub-title-info">必填，6到12个字符，支持中文，英文和字符</p>
         </div>
         <el-input
@@ -164,12 +164,12 @@
           size="small"
         ></el-input>
         <div class="sub-title row-mt">
-          <p class="sub-title-title">重置密码</p>
+          <p class="sub-title-title require-field">重置密码</p>
           <p class="sub-title-info">不填写则不更变原有值</p>
         </div>
         <el-input v-model="editUserInfo.passWord" placeholder="原值" size="small"></el-input>
         <div class="sub-title row-mt">
-          <p class="sub-title-title">权限</p>
+          <p class="sub-title-title require-field">权限</p>
           <p class="sub-title-info">普通权限适用于商业用户，最高权限适用于管理人员</p>
         </div>
         <el-select v-model="editUserInfo.permission" placeholder="请选择" size="small">
@@ -365,7 +365,7 @@ export default {
         for (const v of this.multipleSelection) {
           uuids.push(v.uuid);
         }
-        if(!uuids.length){
+        if (!uuids.length) {
           throw new Error("请至少选择一个用户");
         }
         await request({