强制修改密码弹窗

acupuncture-前台/src/App.vue

@@ -2,15 +2,130 @@
   <div id="app">
     <router-view />
     <theme-picker />
+    <el-dialog
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      title="修改密码"
+      :visible.sync="passShow"
+      width="620px"
+      append-to-body
+      class="popup"
+      :show-close="false"
+    >
+      <el-form ref="form" :model="user" :rules="rules" label-width="80px">
+        <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="请输入新密码"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label="确认密码" prop="confirmPassword">
+          <el-input
+            v-model="user.confirmPassword"
+            placeholder="请确认新密码"
+            type="password"
+            show-password
+          />
+        </el-form-item>
+        <el-form-item label=" " style="margin-bottom: 0px">
+          <template slot-scope="scope">
+            <el-button type="primary" @click="submit" size="mini"
+              >确 定</el-button
+            >
+          </template>
+        </el-form-item>
+      </el-form>
+    </el-dialog>
   </div>
 </template>
 
 <script>
+import { updateUserPwd } from "@/api/system/user";
 import ThemePicker from "@/components/ThemePicker";
-
+import { mapState, mapMutations } from "vuex";
 export default {
   name: "App",
   components: { ThemePicker },
+  data() {
+    const equalToPassword = (rule, value, callback) => {
+      if (this.user.newPassword !== value) {
+        callback(new Error("两次输入的密码不一致"));
+      } else {
+        callback();
+      }
+    };
+    return {
+      passShow: false,
+      user: {
+        oldPassword: undefined,
+        newPassword: undefined,
+        confirmPassword: undefined,
+      },
+      rules: {
+        oldPassword: [
+          { required: true, message: "旧密码不能为空", trigger: "blur" },
+        ],
+        newPassword: [
+          { required: true, message: "密码不能为空", trigger: "blur" },
+          {
+            pattern: /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{8,20}$/,
+            message: "必须包含数字、字母、特殊字符, 长度为8到20位",
+            trigger: "blur",
+          },
+        ],
+        confirmPassword: [
+          { required: true, message: "确认密码不能为空", trigger: "blur" },
+          { required: true, validator: equalToPassword, trigger: "blur" },
+        ],
+      },
+      userInfo: {},
+    };
+  },
+  computed: {
+    ...mapState({
+      forceUpdPwdFlag: (state) => state.user.forceUpdPwdFlag,
+    }),
+  },
+  watch: {
+    // 监听store中forceUpdPwdFlag的变化
+    forceUpdPwdFlag(new1, old) {
+      if (new1) {
+        this.passShow = true;
+      }
+    },
+  },
+
+  created() {},
+  methods: {
+    submit() {
+      this.$refs["form"].validate(async (valid) => {
+        if (valid) {
+          const res = await updateUserPwd(
+            this.user.oldPassword,
+            this.user.newPassword
+          );
+          const { code, msg } = res;
+          if (code === 200) {
+            this.passShow = false;
+            this.$message.success("修改成功");
+            // const res = await getInfo();
+          } else {
+            this.$message.warning(msg);
+          }
+        }
+      });
+    },
+  },
   metaInfo() {
     return {
       title:

acupuncture-前台/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,
+  forceUpdPwdFlag: state => state.user.forceUpdPwdFlag,
 }
 export default getters

acupuncture-前台/src/store/modules/user.js

@@ -1,107 +1,121 @@
-import { login, logout, getInfo } from '@/api/login'
+import { login, logout, getInfo } from "@/api/login";
-import { getToken, setToken, removeToken } from '@/utils/auth'
+import { getToken, setToken, removeToken } from "@/utils/auth";
-import { isHttp, isEmpty } from "@/utils/validate"
+import { isHttp, isEmpty } from "@/utils/validate";
-import defAva from '@/assets/images/profile.jpg'
+import defAva from "@/assets/images/profile.jpg";
 
 const user = {
   state: {
     token: getToken(),
-    id: '',
+    id: "",
-    name: '',
+    name: "",
-    avatar: '',
+    avatar: "",
     roles: [],
-    permissions: []
+    permissions: [],
+    forceUpdPwdFlag: 0,
   },
 
   mutations: {
     SET_TOKEN: (state, token) => {
-      state.token = token
+      state.token = token;
     },
     SET_ID: (state, id) => {
-      state.id = id
+      state.id = id;
     },
     SET_NAME: (state, name) => {
-      state.name = name
+      state.name = name;
     },
     SET_AVATAR: (state, avatar) => {
-      state.avatar = avatar
+      state.avatar = avatar;
     },
     SET_ROLES: (state, roles) => {
-      state.roles = roles
+      state.roles = roles;
     },
     SET_PERMISSIONS: (state, permissions) => {
-      state.permissions = permissions
+      state.permissions = permissions;
-    }
+    },
+    SET_PWDFLAG: (state, data) => {
+      state.forceUpdPwdFlag = data;
+    },
   },
 
   actions: {
     // 登录
     Login({ commit }, userInfo) {
-      const username = userInfo.username.trim()
+      const username = userInfo.username.trim();
-      const password = userInfo.password
+      const password = userInfo.password;
-      const code = userInfo.code
+      const code = userInfo.code;
-      const uuid = userInfo.uuid
+      const uuid = userInfo.uuid;
       return new Promise((resolve, reject) => {
-        login(username, password, code, uuid).then(res => {
+        login(username, password, code, uuid)
-          setToken(res.token)
+          .then((res) => {
-          commit('SET_TOKEN', res.token)
+            setToken(res.token);
-          resolve()
+            commit("SET_TOKEN", res.token);
-        }).catch(error => {
+            resolve();
-          reject(error)
+          })
-        })
+          .catch((error) => {
-      })
+            reject(error);
+          });
+      });
     },
 
     // 获取用户信息
     GetInfo({ commit, state }) {
       return new Promise((resolve, reject) => {
-        getInfo().then(res => {
+        getInfo()
-          const user = res.user
+          .then((res) => {
-          localStorage.setItem("user", JSON.stringify(user))
+            const user = res.user;
-          let avatar = user.avatar || ""
+            commit("SET_PWDFLAG", res.forceUpdPwdFlag);
-          if (!isHttp(avatar)) {
+            localStorage.setItem("user", JSON.stringify(user));
-            avatar = (isEmpty(avatar)) ? defAva : process.env.VUE_APP_BASE_API + avatar
+            let avatar = user.avatar || "";
-          }
+            if (!isHttp(avatar)) {
-          if (res.roles && res.roles.length > 0) { // 验证返回的roles是否是一个非空数组
+              avatar = isEmpty(avatar)
-            commit('SET_ROLES', res.roles)
+                ? defAva
-            commit('SET_PERMISSIONS', res.permissions)
+                : process.env.VUE_APP_BASE_API + avatar;
-          } else {
+            }
-            commit('SET_ROLES', ['ROLE_DEFAULT'])
+            if (res.roles && res.roles.length > 0) {
-          }
+              // 验证返回的roles是否是一个非空数组
-          commit('SET_ID', user.userId)
+              commit("SET_ROLES", res.roles);
-          commit('SET_NAME', user.userName)
+              commit("SET_PERMISSIONS", res.permissions);
-          commit('SET_AVATAR', avatar)
+            } else {
-          resolve(res)
+              commit("SET_ROLES", ["ROLE_DEFAULT"]);
-        }).catch(error => {
+            }
-          reject(error)
+            commit("SET_ID", user.userId);
-        })
+            commit("SET_NAME", user.userName);
-      })
+            commit("SET_AVATAR", avatar);
+            resolve(res);
+          })
+          .catch((error) => {
+            reject(error);
+          });
+      });
     },
 
     // 退出系统
     LogOut({ commit, state }) {
       return new Promise((resolve, reject) => {
-        logout(state.token).then(() => {
+        logout(state.token)
-          commit('SET_TOKEN', '')
+          .then(() => {
-          commit('SET_ROLES', [])
+            commit("SET_TOKEN", "");
-          commit('SET_PERMISSIONS', [])
+            commit("SET_ROLES", []);
-          removeToken()
+            commit("SET_PERMISSIONS", []);
-          resolve()
+            removeToken();
-        }).catch(error => {
+            resolve();
-          reject(error)
+          })
-        })
+          .catch((error) => {
-      })
+            reject(error);
+          });
+      });
     },
 
     // 前端 登出
     FedLogOut({ commit }) {
-      return new Promise(resolve => {
+      return new Promise((resolve) => {
-        commit('SET_TOKEN', '')
+        commit("SET_TOKEN", "");
-        removeToken()
+        removeToken();
-        resolve()
+        resolve();
-      })
+      });
-    }
+    },
-  }
+  },
-}
+};
 
-export default user
+export default user;