密碼失效修改密碼

fuliqi

2024-10-17 96783deec8d19e03d4484751df0a2ccd252a9716

密碼失效修改密碼

 src/api/index.js

@@ -67,7 +67,7 @@
// response拦截器
service.interceptors.response.use(
  (response) => {
    if (response.status === 200 && response.data.code === 1){
    if (response.status === 200  && (response.data.code === 1 || response.data.code ===205)){
      return Promise.resolve(response.data);
    } else {
      errorHandle(response.data.code, response.data);

 src/api/modules/user.js

@@ -9,3 +9,7 @@
export const logout = () => {
    return service.post('/api/user/logout');
}
//修改密码
export const updatePassword = (data= {}) => {
    return service.post('/api/common/user/update/password', data)
}

 src/views/login/index.vue

@@ -22,29 +22,59 @@
                  <!-- <label>密码 <a href="#" class="forgot-link">忘记密码?</a></label> -->
                  <el-input class="lowin-input" :key="passwordType" ref="password" v-model="loginForm.password"
                    :type="passwordType" placeholder="密码" name="password" tabindex="2" auto-complete="on"
                    @keyup.native="checkCapslock" @blur="capsTooltip = false" @keyup.enter.native="handleLogin" />
                            @keyup.native="checkCapslock" @blur="capsTooltip = false"
                            @keyup.enter.native="handleLogin"/>
                </el-form-item>
              </div>

              <el-button :loading="loading" class="lowin-btn login-btn" @click="handleLogin">登录</el-button>
            </el-form>

          </div>
        </div>
      </div>
    </div>
  </div>

  <el-dialog
      title="修改密码"
      v-model="forceUpdateShow"
      width="400px"
  >
    <div style="margin-bottom: 10px; color: #aa1111">您的密码已经过期，请重新设置~</div>
    <el-form ref="updatePasswordFormRef" :model="updatePasswordForm" :rules="updatePasswordRules">
      <el-form-item label="新密码" prop="newPassword">
        <el-input v-model="updatePasswordForm.newPassword" placeholder="应包含大小写、数字" show-password></el-input>
      </el-form-item>
      <el-form-item label="确认密码">
        <el-input v-model="updatePasswordForm.confirmPassword" placeholder="确认密码" show-password></el-input>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
              <el-button @click="forceUpdateShow = false">关 闭</el-button>
               <el-button type="primary" @click="changePassword">修 改</el-button>
              </span>
  </el-dialog>
</template>

<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { useRouter } from 'vue-router';
import { login } from '@/api/modules/user.js';
import {ElMessage} from 'element-plus';
import {login, updatePassword} from '@/api/modules/user.js';
import { useUserStore } from '@/store/index.js';

const userStore = useUserStore();

const router = useRouter();

const forceUpdateShow = ref(false);

const updatePasswordForm = reactive({
  userId: null,
  newPassword: '',
  confirmPassword: ''
});

const validateUsername = (rule, value, callback) => {
  if (value.length < 5) {
@@ -60,6 +90,19 @@
    callback();
  }
};
const validateNewPassword = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入密码'))
  } else if (!/[A-Z]/.test(value)) {
    callback(new Error('密码必须包含至少一个大写字母'))
  } else if (!/[a-z]/.test(value)) {
    callback(new Error('密码必须包含至少一个小写字母'))
  } else if (!/[0-9]/.test(value)) {
    callback(new Error('密码必须包含至少一个数字'))
  } else {
    callback()
  }
}

const loginForm = reactive({
  userName: '',
@@ -70,17 +113,20 @@
  userName: [{ required: true, trigger: 'blur', validator: validateUsername }],
  password: [{ required: true, trigger: 'blur', validator: validatePassword }]
});
const updatePasswordRules = reactive({
  newPassword: [{required: true, trigger: 'blur', validator: validateNewPassword}]
});
const passwordType = ref('password');
const capsTooltip = ref(false);
const loading = ref(false);
const showDialog = ref(false);


const userName = ref(null);
const password = ref(null);

const loginFormRef = ref(null);


const updatePasswordFormRef = ref(null);

const checkCapslock = ({ shiftKey, key } = {}) => {
  if (key && key.length === 1) {
@@ -111,16 +157,43 @@
    if (valid) {
      loading.value = true;
      login(loginForm).then(res => {
        // 如果code为205，则强制修改密码
        if (res && res.code === 205) {
          updatePasswordForm.userId = res.data
          console.log(updatePasswordForm.userId)
          forceUpdateShow.value = true;
          console.log(forceUpdateShow.value)
          loading.value = false
        } else {
        loading.value = false;
        userStore.setUserInfo(res.data);
        router.push('/index');
        }
      }).catch(err => {
        loading.value = false;
      });
    }
  });
};

const changePassword = () => {
  updatePasswordFormRef.value.validate((valid) => {
    if (valid) {
      if (updatePasswordForm.newPassword !== updatePasswordForm.confirmPassword) {
        ElMessage.error('两次输入的密码不一致');
        return;
      }
      updatePassword(updatePasswordForm).then(res => {
        if (res.code === 1) {
          ElMessage.success('密码修改成功。请重新登录');
          loginForm.password = '';
          forceUpdateShow.value = false;
        }
      }).catch(error => {
        ElMessage.error('密码修改失败：' + error.message);
      });
    }
  });
};
onMounted(() => {
  if (loginForm.userName === '') {
    userName.value.focus();