modify为true时登录要求修改密码，更改修改密码的限制

src/components/changePassword/index.vue

@@ -0,0 +1,143 @@
+<template>
+  <div class="containe">
+    <div class="main">
+      <el-form ref="form" :model="user" :rules="rules" label-width="120px">
+        <el-form-item label="原有密码" prop="oldPassword">
+          <el-input
+            v-model="user.oldPassword"
+            placeholder="请输入原有密码"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="新的密码" prop="newPassword">
+          <el-input
+            v-model="user.newPassword"
+            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="user.confirmPassword"
+            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" size="mini" @click="submit">确定</el-button>
+          <!-- <el-button type="danger" size="mini" @click="close">关闭</el-button> -->
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+  
+<script>
+import { updateUserPwd } from "@/api/system/user";
+
+export default {
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    const newPassRule = (rule, value, callback) => {
+      var pPattern = new RegExp(
+        /^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?,.?/|!@#$%^&*()~ ]).*$/
+      );
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else if (!pPattern.test(value)) {
+        callback(
+          new Error("密码长度最少为8位，包含大小写字母、数字、特殊字符")
+        );
+      } else {
+        callback();
+      }
+    };
+    return {
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined,
+      },
+      // 表单校验
+      rules: {
+        oldPassword: [
+          { required: true, message: "原有密码不能为空", trigger: "blur" },
+        ],
+        newPassword: [
+          { required: true, message: "新的密码不能为空", trigger: "blur" },
+          { required: true, validator: newPassRule, trigger: "blur" },
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, validator: equalToPassword, trigger: "blur" },
+        ],
+      },
+    };
+  },
+  methods: {
+    submit() {
+      this.$refs["form"].validate((valid) => {
+        if (valid) {
+          updateUserPwd(this.user.oldPassword, this.user.newPassword).then(
+            (response) => {
+              this.$modal.msgSuccess("修改成功");
+              this.$tab.closePage();
+              this.$store.dispatch("LogOut").then(() => {
+                location.href = "/index";
+              });
+            }
+          );
+        }
+      });
+    },
+    // close() {
+    //
+    // },
+  },
+};
+</script>
+  
+<style scoped lang='scss'>
+.containe {
+  color: #7ea4c8;
+  /* font-size: 0.14rem; */
+  font-family: PingFang SC-Medium, PingFang SC;
+  font-weight: 500;
+  padding-left: calc(100vw * (20 / 1920));
+  .main {
+    height: 400px;
+    background: #0b113b;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    ::v-deep .el-form-item__label {
+      color: #2e8aecff;
+    }
+    ::v-deep .el-input--medium .el-input__inner {
+      background: transparent;
+      border: 1px solid #006c9aff;
+      color: #7ea4c8ff;
+    }
+  }
+}
+::v-deep .el-button--mini {
+  margin-left: 35%;
+}
+::v-deep.el-input--medium {
+  width: 400px !important;
+}
+::v-deep .el-form-item__content {
+  margin-left: 50px !important;
+  width: calc(100vw * (700 / 1920)) !important;
+}
+</style>
+  

src/main.js

@@ -65,6 +65,8 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+//修改密码组件
+import ChangePassword from '@/components/changePassword'
 //onlyoffice组件
 // import onlyoffice from 'http://192.168.188.88:19530/web-apps/apps/api/documents/api.js'
 // 全局方法挂载
@@ -86,6 +88,8 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('ChangePassword', ChangePassword)
+
 
 Vue.use(directive)
 Vue.use(plugins)

src/permission.js

@@ -23,7 +23,8 @@ router.beforeEach((to, from, next) => {
   if (getToken()) {
     to.meta.title && store.dispatch('settings/setTitle', to.meta.title)
     /* has token*/
-    if (to.path === '/login') {
+    console.log('store.getters.modifydata',)
+    if (to.path === '/login'&& sessionStorage.getItem("modifys") == false) {
       next({
         path: '/home/page'
       })

src/store/getters.js

@@ -15,5 +15,6 @@ const getters = {
   topbarRouters:state => state.permission.topbarRouters,
   defaultRoutes:state => state.permission.defaultRoutes,
   sidebarRouters:state => state.permission.sidebarRouters,
+  modifydata: state => state.user.modifys
 }
 export default getters

src/store/modules/user.js

@@ -9,7 +9,8 @@ const user = {
     uname:'',
     avatar: '',
     roles: [],
-    permissions: []
+    permissions: [],
+    modifys:false
   },
 
   mutations: {
@@ -36,6 +37,9 @@ const user = {
     },
     SET_PERMISSIONS: (state, permissions) => {
       state.permissions = permissions
+    },
+    SET_MODIFY: (state, modifys) => {
+      state.modifys = modifys
     }
   },
 
@@ -53,6 +57,8 @@ const user = {
           commit('SET_TOKEN', data.access_token)
           setExpiresIn(data.expires_in)
           commit('SET_EXPIRES_IN', data.expires_in)
+          commit('SET_MODIFY', data.modify)
+          sessionStorage.setItem("modifys", data.modify);
           resolve()
         }).catch(error => {
           reject(error)
@@ -103,6 +109,7 @@ const user = {
           commit('SET_TOKEN', '')
           commit('SET_ROLES', [])
           commit('SET_PERMISSIONS', [])
+          commit('SET_MODIFY',false)
           removeToken()
           resolve()
         }).catch(error => {

src/views1/LoginView.vue

@@ -62,16 +62,15 @@
               />
             </el-input>
             <div class="login-code">
-              <img :src="codeUrl" @click="getCode" class="login-code-img"/>
+              <img :src="codeUrl" @click="getCode" class="login-code-img" />
             </div>
           </el-form-item>
           <el-checkbox
             v-model="loginForm.rememberMe"
             style="margin: 0px 0px 25px 50px"
             class="remember"
-          >记住密码
-          </el-checkbox
-          >
+            >记住密码
+          </el-checkbox>
           <el-form-item style="width: 100%">
             <el-button
               :loading="loading"
@@ -85,121 +84,137 @@
             </el-button>
             <div style="float: right" v-if="register">
               <router-link class="link-type" :to="'/register'"
-              >立即注册
-              </router-link
-              >
+                >立即注册
+              </router-link>
             </div>
           </el-form-item>
         </el-form>
       </div>
     </div>
+    <el-dialog
+      :visible.sync="dialogVisible"
+      title="请修改当前密码"
+      width="300"
+    >
+      <change-password :dialogVisible="dialogVisible"></change-password>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { getCodeImg } from '@/api/login1'
-import Cookies from 'js-cookie'
-import { decrypt, encrypt } from '@/utils/jsencrypt'
-
+import { getCodeImg } from "@/api/login1";
+import Cookies from "js-cookie";
+import { decrypt, encrypt } from "@/utils/jsencrypt";
 export default {
-  name: 'Login',
+  name: "Login",
   data() {
     return {
-      codeUrl: '',
+      codeUrl: "",
       loginForm: {
-        username: '',
-        password: '',
+        username: "",
+        password: "",
         rememberMe: false,
-        code: '',
-        uuid: ''
+        code: "",
+        uuid: "",
       },
+      dialogVisible: false, //登录接口 modify为true时修改密码弹窗显示
+      ismodify:false,
       loginRules: {
         username: [
-          { required: true, trigger: 'blur', message: '请输入您的用户名' }
+          { required: true, trigger: "blur", message: "请输入您的用户名" },
         ],
         password: [
-          { required: true, trigger: 'blur', message: '请输入您的密码' }
+          { required: true, trigger: "blur", message: "请输入您的密码" },
         ],
-        code: [{ required: true, trigger: 'change', message: '请输入验证码' }]
+        code: [{ required: true, trigger: "change", message: "请输入验证码" }],
       },
       loading: false,
       // 验证码开关
       captchaEnabled: false,
       // 注册开关
       register: false,
-      redirect: undefined
-    }
+      redirect: undefined,
+    };
   },
   watch: {
     $route: {
-      handler: function(route) {
-        this.redirect = route.query && route.query.redirect
+      handler: function (route) {
+        this.redirect = route.query && route.query.redirect;
       },
-      immediate: true
+      immediate: true,
     }
   },
   created() {
-    this.getCode()
-    this.getCookie()
+    this.getCode();
+    this.getCookie();
   },
   methods: {
     getCode() {
       getCodeImg().then((res) => {
         this.captchaEnabled =
-          res.captchaEnabled === undefined ? true : res.captchaEnabled
+          res.captchaEnabled === undefined ? true : res.captchaEnabled;
         if (this.captchaEnabled) {
-          this.codeUrl = 'data:image/gif;base64,' + res.img
-          this.loginForm.uuid = res.uuid
+          this.codeUrl = "data:image/gif;base64," + res.img;
+          this.loginForm.uuid = res.uuid;
         }
-      })
+      });
     },
     getCookie() {
-      const username = Cookies.get('username')
-      const password = Cookies.get('password')
-      const rememberMe = Cookies.get('rememberMe')
+      const username = Cookies.get("username");
+      const password = Cookies.get("password");
+      const rememberMe = Cookies.get("rememberMe");
       this.loginForm = {
         username: username === undefined ? this.loginForm.username : username,
         password:
           password === undefined ? this.loginForm.password : decrypt(password),
-        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe)
-      }
+        rememberMe: rememberMe === undefined ? false : Boolean(rememberMe),
+      };
     },
     handleLogin() {
-      sessionStorage.setItem('name', this.loginForm.username)
+      sessionStorage.setItem("name", this.loginForm.username);
       this.$refs.loginForm.validate((valid) => {
         if (valid) {
-          this.loading = true
+         this.loading = true;
           if (this.loginForm.rememberMe) {
-            Cookies.set('username', this.loginForm.username, { expires: 30 })
-            Cookies.set('password', encrypt(this.loginForm.password), {
-              expires: 30
-            })
-            Cookies.set('rememberMe', this.loginForm.rememberMe, {
-              expires: 30
-            })
+            Cookies.set("username", this.loginForm.username, { expires: 30 });
+            Cookies.set("password", encrypt(this.loginForm.password), {
+              expires: 30,
+            });
+            Cookies.set("rememberMe", this.loginForm.rememberMe, {
+              expires: 30,
+            });
           } else {
-            Cookies.remove('username')
-            Cookies.remove('password')
-            Cookies.remove('rememberMe')
+            Cookies.remove("username");
+            Cookies.remove("password");
+            Cookies.remove("rememberMe");
           }
           this.$store
-            .dispatch('Login', this.loginForm)
+            .dispatch("Login", this.loginForm)
             .then(() => {
-              //TODO 在这里弹出来修改密码框框
-              this.$router.push({ path: this.redirect || '/index' }).catch(() => {
-              })
+              if (this.$store.state.user.modifys) {
+                this.dialogVisible = true;
+                this.ismodify = true;
+                this.loading = false;
+              } else {
+                //TODO 在这里弹出来修改密码框框
+         
+                this.ismodify = false;
+                this.$router
+                  .push({ path: this.redirect || "/index" })
+                  .catch(() => {});
+              }
             })
             .catch(() => {
-              this.loading = false
+              this.loading = false;
               if (this.captchaEnabled) {
-                this.getCode()
+                this.getCode();
               }
-            })
+            });
         }
-      })
-    }
-  }
-}
+      });
+    },
+  },
+};
 </script>
 
 <style scoped lang='scss'>
@@ -255,13 +270,13 @@ export default {
       }
 
       .login-form-username {
-        color: #5C7994FF;
+        color: #5c7994ff;
         margin: 0;
         font-size: 18px;
       }
 
       .login-form-password {
-        color: #5C7994FF;
+        color: #5c7994ff;
         margin-bottom: 0;
         font-size: 18px;
       }
@@ -275,7 +290,7 @@ export default {
 
   ::v-deep .el-input--medium .el-input__inner {
     background: transparent;
-    border: 1px solid #03486F;
+    border: 1px solid #03486f;
   }
 
   ::v-deep .el-form-item__content {
@@ -283,4 +298,14 @@ export default {
     width: calc(100vw * (360 / 1920));
   }
 }
+::v-deep .el-dialog__body,
+::v-deep .el-dialog__header {
+  background: #0b113b !important;
+}
+
+::v-deep .el-dialog__title {
+  color: #fff !important;
+  font-weight: 600;
+  font-family: PingFang SC-Medium, PingFang SC;
+}
 </style>

src/views1/Personal/Modify/ModifyView.vue

@@ -22,7 +22,7 @@
         <el-form-item label="新的密码" prop="newPassword">
           <el-input
             v-model="user.newPassword"
-            placeholder="请输入新的密码"
+            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
             type="password"
             show-password
           />
@@ -30,7 +30,7 @@
         <el-form-item label="确认密码" prop="confirmPassword">
           <el-input
             v-model="user.confirmPassword"
-            placeholder="请确认新密码"
+            placeholder="密码长度最少为8位,包含大小写字母、数字、特殊字符"
             type="password"
             show-password
           />
@@ -56,6 +56,20 @@ export default {
         callback();
       }
     };
+    const newPassRule = (rule, value, callback) => {
+      var pPattern = new RegExp(
+        /^.*(?=.{8,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*?,.?/|!@#$%^&*()~ ]).*$/
+      );
+      if (value === "") {
+        callback(new Error("请输入密码"));
+      } else if (!pPattern.test(value)) {
+        callback(
+          new Error("密码长度最少为8位，包含大小写字母、数字、特殊字符")
+        );
+      } else {
+        callback();
+      }
+    };
     return {
       user: {
         oldPassword: undefined,
@@ -69,12 +83,7 @@ export default {
         ],
         newPassword: [
           { required: true, message: "新的密码不能为空", trigger: "blur" },
-          {
-            min: 6,
-            max: 20,
-            message: "长度在 6 到 20 个字符",
-            trigger: "blur",
-          },
+          { required: true, validator: newPassRule, trigger: "blur" },
         ],
         confirmPassword: [
           { required: true, message: "确认密码不能为空", trigger: "blur" },
@@ -159,7 +168,7 @@ export default {
     margin-left: 35%;
 }
 ::v-deep.el-input--medium{
-  width: 158px !important;
+  width: 400px !important;
 }
 
 </style>

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        // target: `http://192.168.188.99:8080`,
+        // target: `http://192.168.101.9:8080`,
         target: 'http://localhost:8080',
         changeOrigin: true,
         pathRewrite: {