完善修改密码功能

app/admin/controller/UserController.php

@@ -2,6 +2,9 @@
 
 namespace app\admin\controller;
 
+use app\common\service\User as UserService;
+use support\Request;
+
 class UserController extends BaseController
 {
     public function info(){
@@ -19,4 +22,13 @@ class UserController extends BaseController
             ]
         ]);
     }
+
+    public function changePassword(Request $request)
+    {
+        $originalPassword = $request->input('original_password');
+        $new_password = $request->input('new_password');
+        $new_password_confirm = $request->input('new_password_confirm');
+        $service = new UserService;
+        return $service->changePassword($originalPassword, $new_password, $new_password_confirm);
+    }
 }

app/common/service/User.php

@@ -0,0 +1,26 @@
+<?php
+
+namespace app\common\service;
+
+use app\admin\model\User as UserModel;
+use Tinywan\Jwt\JwtToken;
+
+class User extends BaseServices
+{
+    public function changePassword($originPassword, $newPassword, $confirmPassword)
+    {
+        if ($newPassword !== $confirmPassword) {
+            return error('新密码和确认密码输入不一致');
+        }
+
+        $dbPassword = JwtToken::getExtend()['password'];
+        if ($dbPassword !== $originPassword) {
+            return error('原始密码输入错误');
+        }
+
+        $user = new UserModel;
+        $user->update(['password' => $newPassword], ['id' => JwtToken::getExtend()['id']]);
+        return success();
+    }
+
+}

front/src/api/login.js

@@ -10,7 +10,8 @@ const userApi = {
   SendSmsErr: '/account/sms_err',
   // get my info
   UserInfo: '/user/info',
-  UserMenu: '/user/nav'
+  UserMenu: '/user/nav',
+  ChangePassword: '/user/changePassword'
 }
 
 /**
@@ -78,3 +79,11 @@ export function get2step (parameter) {
     data: parameter
   })
 }
+
+export function changePassword(parameter) {
+  return request({
+    url: userApi.ChangePassword,
+    method: 'post',
+    data: parameter
+  })
+}

front/src/components/GlobalHeader/AvatarDropdown.vue

@@ -1,37 +1,91 @@
 <template>
-  <a-dropdown v-if="currentUser && currentUser.name" placement="bottomRight">
-    <span class="ant-pro-account-avatar">
-      <a-avatar size="small" src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png" class="antd-pro-global-header-index-avatar" />
-      <span>{{ currentUser.name }}</span>
-    </span>
-    <template v-slot:overlay>
-      <a-menu class="ant-pro-drop-down menu" :selected-keys="[]">
-        <a-menu-item v-if="menu" key="center" @click="handleToCenter">
-          <a-icon type="user" />
-          {{ $t('menu.account.center') }}
-        </a-menu-item>
-        <a-menu-item v-if="menu" key="settings" @click="handleToSettings">
-          <a-icon type="setting" />
-          {{ $t('menu.account.settings') }}
-        </a-menu-item>
-        <a-menu-divider v-if="menu" />
-        <a-menu-item key="logout" @click="handleLogout">
-          <a-icon type="logout" />
-          {{ $t('menu.account.logout') }}
-        </a-menu-item>
-      </a-menu>
-    </template>
-  </a-dropdown>
+  <div v-if="currentUser && currentUser.name">
+    <a-dropdown placement="bottomRight">
+      <span class="ant-pro-account-avatar">
+        <a-avatar class="antd-pro-global-header-index-avatar" size="small"
+                  src="https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png"/>
+        <span>{{ currentUser.name }}</span>
+      </span>
+      <template v-slot:overlay>
+        <a-menu :selected-keys="[]" class="ant-pro-drop-down menu">
+          <a-menu-item v-if="menu" key="settings" @click="() => modalVisible = true">
+            <a-icon type="setting"/>
+            修改密码
+          </a-menu-item>
+          <a-menu-divider v-if="menu"/>
+          <a-menu-item key="logout" @click="handleLogout">
+            <a-icon type="logout"/>
+            {{ $t('menu.account.logout') }}
+          </a-menu-item>
+        </a-menu>
+      </template>
+    </a-dropdown>
+    <a-modal
+      :confirm-loading="modalLoading"
+      :visible="modalVisible"
+      title="修改密码"
+      @cancel="() => modalVisible = false"
+      @ok="handleChangePassword"
+    >
+      <a-form :form="form" v-bind="formLayout">
+        <a-form-item label="原始密码">
+          <a-input-password
+            v-decorator="['original_password', {rules: [{required: true, message: '请输入原始密码'}]}]"
+            placeholder="请输入原始密码"/>
+        </a-form-item>
+        <a-form-item label="新密码">
+          <a-input-password
+            v-decorator="['new_password', {
+              rules: [
+                { required: true, message: '请输入确认新密码' },
+                { validator: validateNewPassword, message: '新旧密码不能相同' }
+              ]
+            }]"
+            placeholder="请输入新密码"/>
+        </a-form-item>
+        <a-form-item label="确认新密码">
+          <a-input-password
+            v-decorator="['new_password_confirm', {
+              rules: [
+                { required: true, message: '请输入确认新密码' },
+                { validator: validateConfirmPassword, message: '两次输入的密码不一致' }
+              ]
+            }]"
+            placeholder="请再次输入新密码"/>
+        </a-form-item>
+      </a-form>
+    </a-modal>
+  </div>
   <span v-else>
-    <a-spin size="small" :style="{ marginLeft: 8, marginRight: 8 }" />
+    <a-spin :style="{ marginLeft: 8, marginRight: 8 }" size="small"/>
   </span>
 </template>
 
 <script>
-import { Modal } from 'ant-design-vue'
+import md5 from 'md5'
+import {Modal} from 'ant-design-vue'
+import {changePassword} from "@/api/login";
 
 export default {
   name: 'AvatarDropdown',
+  data() {
+    return {
+      modalLoading: false,
+      modalVisible: false,
+      passwordVisible: false,
+      formLayout: {
+        labelCol: {
+          xs: {span: 24},
+          sm: {span: 7}
+        },
+        wrapperCol: {
+          xs: {span: 24},
+          sm: {span: 17}
+        }
+      },
+      form: this.$form.createForm(this)
+    }
+  },
   props: {
     currentUser: {
       type: Object,
@@ -43,11 +97,44 @@ export default {
     }
   },
   methods: {
-    handleToCenter () {
-      this.$router.push({ path: '/account/center' })
+    handleChangePassword() {
+      this.modalLoading = true
+      this.form.validateFields((errors, values) => {
+        if (!errors) {
+          Object.keys(values).forEach(key => {
+            values[key] = md5(values[key])
+          })
+          changePassword(values).then(res => {
+            console.log(res)
+            this.modalVisible = false
+            this.$message.success('修改成功，请重新登录', 3, () => {
+              this.$store.dispatch('Logout').then(() => {
+                this.$router.push({name: 'login'})
+              })
+            })
+          }).finally(() => {
+            this.modalLoading = false
+          })
+        }
+      })
     },
-    handleToSettings () {
-      this.$router.push({ path: '/account/settings' })
+    validateNewPassword(rule, value, callback) {
+      const {form} = this;
+      // 校验新密码和原始密码是否相等
+      if (value && value == form.getFieldValue('original_password')) {
+        callback('新旧密码不能相同');
+      } else {
+        callback();
+      }
+    },
+    validateConfirmPassword(rule, value, callback) {
+      const {form} = this;
+      // 校验新密码和确认新密码是否相等
+      if (value && value !== form.getFieldValue('new_password')) {
+        callback('两次输入的密码不一致');
+      } else {
+        callback();
+      }
     },
     handleLogout (e) {
       Modal.confirm({
@@ -61,7 +148,8 @@ export default {
             this.$router.push({ name: 'login' })
           })
         },
-        onCancel () {}
+        onCancel() {
+        }
       })
     }
   }
@@ -73,6 +161,7 @@ export default {
   :deep(.action) {
     margin-right: 8px;
   }
+
   :deep(.ant-dropdown-menu-item) {
     min-width: 160px;
   }