feat: 实现 2FA (TOTP) 的设置、验证和禁用流程

2025-04-15 11:49:28 +08:00
parent ffb772546d
commit 171baec830
9 changed files with 1071 additions and 97 deletions
@@ -1,24 +1,32 @@
 <script setup lang="ts">
-import { reactive } from 'vue';
+import { reactive, ref } from 'vue'; // 导入 ref
 import { storeToRefs } from 'pinia';
-import { useI18n } from 'vue-i18n'; // 引入 useI18n
+import { useI18n } from 'vue-i18n';
 import { useAuthStore } from '../stores/auth.store';

-const { t } = useI18n(); // 获取 t 函数
+const { t } = useI18n();
 const authStore = useAuthStore();
-const { isLoading, error } = storeToRefs(authStore); // 获取加载和错误状态
+// 获取 loginRequires2FA 状态
+const { isLoading, error, loginRequires2FA } = storeToRefs(authStore);

 // 表单数据
 const credentials = reactive({
  username: '',
  password: '',
 });
+const twoFactorToken = ref(''); // 用于存储 2FA 验证码

-// 处理登录提交
-const handleLogin = async () => {
-  await authStore.login(credentials);
-  // 登录成功会自动重定向 (在 store action 中处理)
-  // 登录失败会在模板中显示错误信息
+// 处理登录或 2FA 验证提交
+const handleSubmit = async () => {
+  if (loginRequires2FA.value) {
+    // 如果需要 2FA，则调用 2FA 验证 action
+    await authStore.verifyLogin2FA(twoFactorToken.value);
+  } else {
+    // 否则，调用常规登录 action
+    await authStore.login(credentials);
+  }
+  // 成功后的重定向由 store action 处理
+  // 失败会更新 error 状态并在模板中显示
 };
 </script>

@@ -26,23 +34,31 @@ const handleLogin = async () => {
  <div class="login-view">
    <div class="login-form-container">
      <h2>{{ t('login.title') }}</h2>
-      <form @submit.prevent="handleLogin">
-        <div class="form-group">
-          <label for="username">{{ t('login.username') }}:</label>
-          <input type="text" id="username" v-model="credentials.username" required :disabled="isLoading" />
+      <form @submit.prevent="handleSubmit">
+        <!-- 常规登录字段 -->
+        <div v-if="!loginRequires2FA">
+          <div class="form-group">
+            <label for="username">{{ t('login.username') }}:</label>
+            <input type="text" id="username" v-model="credentials.username" required :disabled="isLoading" />
+          </div>
+          <div class="form-group">
+            <label for="password">{{ t('login.password') }}:</label>
+            <input type="password" id="password" v-model="credentials.password" required :disabled="isLoading" />
+          </div>
        </div>
-        <div class="form-group">
-          <label for="password">{{ t('login.password') }}:</label>
-          <input type="password" id="password" v-model="credentials.password" required :disabled="isLoading" />
+
+        <!-- 2FA 验证码输入 -->
+        <div v-if="loginRequires2FA" class="form-group">
+          <label for="twoFactorToken">{{ t('login.twoFactorPrompt') }}</label>
+          <input type="text" id="twoFactorToken" v-model="twoFactorToken" required :disabled="isLoading" pattern="\d{6}" title="请输入 6 位数字验证码" />
        </div>

        <div v-if="error" class="error-message">
-          <!-- 可以直接显示后端返回的错误，或者映射到特定的 i18n key -->
-          {{ error }} <!-- 保持显示后端错误，或者 t('login.error') -->
+          {{ error }}
        </div>

        <button type="submit" :disabled="isLoading">
-          {{ isLoading ? t('login.loggingIn') : t('login.loginButton') }}
+          {{ isLoading ? t('login.loggingIn') : (loginRequires2FA ? t('login.verifyButton') : t('login.loginButton')) }}
        </button>
      </form>
    </div>
@@ -17,59 +17,211 @@
          <label for="confirmPassword">{{ $t('settings.changePassword.confirmPassword') }}</label>
          <input type="password" id="confirmPassword" v-model="confirmPassword" required>
        </div>
-        <button type="submit" :disabled="loading">{{ loading ? $t('common.loading') : $t('settings.changePassword.submit') }}</button>
-        <p v-if="message" :class="{ 'success-message': isSuccess, 'error-message': !isSuccess }">{{ message }}</p>
+        <button type="submit" :disabled="changePasswordLoading">{{ changePasswordLoading ? $t('common.loading') : $t('settings.changePassword.submit') }}</button>
+        <p v-if="changePasswordMessage" :class="{ 'success-message': changePasswordSuccess, 'error-message': !changePasswordSuccess }">{{ changePasswordMessage }}</p>
      </form>
    </div>

    <!-- 其他设置项可以在这里添加 -->

+    <hr>
+
+    <div class="settings-section">
+      <h2>{{ $t('settings.twoFactor.title') }}</h2>
+
+      <!-- 如果 2FA 已启用 -->
+      <div v-if="twoFactorEnabled">
+        <p class="success-message">{{ $t('settings.twoFactor.status.enabled') }}</p>
+        <form @submit.prevent="handleDisable2FA">
+          <div class="form-group">
+            <label for="disablePassword">{{ $t('settings.twoFactor.disable.passwordPrompt') }}</label>
+            <input type="password" id="disablePassword" v-model="disablePassword" required>
+          </div>
+          <button type="submit" :disabled="twoFactorLoading">{{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.disable.button') }}</button>
+        </form>
+      </div>
+
+      <!-- 如果 2FA 未启用 -->
+      <div v-else>
+        <p>{{ $t('settings.twoFactor.status.disabled') }}</p>
+        <!-- 如果不在设置流程中，显示启用按钮 -->
+        <button v-if="!isSettingUp2FA" @click="handleSetup2FA" :disabled="twoFactorLoading">
+          {{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.enable.button') }}
+        </button>
+
+        <!-- 如果正在设置中 -->
+        <div v-if="isSettingUp2FA && setupData">
+          <p>{{ $t('settings.twoFactor.setup.scanQrCode') }}</p>
+          <img :src="setupData.qrCodeUrl" alt="QR Code">
+          <p>{{ $t('settings.twoFactor.setup.orEnterSecret') }} <code>{{ setupData.secret }}</code></p>
+          <form @submit.prevent="handleVerifyAndActivate2FA">
+            <div class="form-group">
+              <label for="verificationCode">{{ $t('settings.twoFactor.setup.enterCode') }}</label>
+              <input type="text" id="verificationCode" v-model="verificationCode" required pattern="\d{6}" title="请输入 6 位数字验证码">
+            </div>
+            <button type="submit" :disabled="twoFactorLoading">{{ twoFactorLoading ? $t('common.loading') : $t('settings.twoFactor.setup.verifyButton') }}</button>
+            <button type="button" @click="cancelSetup" :disabled="twoFactorLoading" style="margin-left: 10px;">{{ $t('common.cancel') }}</button>
+          </form>
+        </div>
+      </div>
+
+      <!-- 显示 2FA 操作的消息 -->
+      <p v-if="twoFactorMessage" :class="{ 'success-message': twoFactorSuccess, 'error-message': !twoFactorSuccess }">{{ twoFactorMessage }}</p>
+    </div>
+
  </div>
 </template>

 <script setup lang="ts">
-import { ref } from 'vue';
+import { ref, onMounted, computed } from 'vue'; // 导入 onMounted 和 computed
 import { useAuthStore } from '../stores/auth.store';
 import { useI18n } from 'vue-i18n';
+import axios from 'axios'; // 需要 axios 来调用 API

 const { t } = useI18n();
 const authStore = useAuthStore();

+// --- 修改密码状态 ---
 const currentPassword = ref('');
 const newPassword = ref('');
 const confirmPassword = ref('');
-const loading = ref(false);
-const message = ref('');
-const isSuccess = ref(false);
+const changePasswordLoading = ref(false);
+const changePasswordMessage = ref('');
+const changePasswordSuccess = ref(false);
+
+// --- 2FA 状态 ---
+const twoFactorEnabled = ref(false); // 用户当前的 2FA 状态
+const twoFactorLoading = ref(false);
+const twoFactorMessage = ref('');
+const twoFactorSuccess = ref(false);
+const setupData = ref<{ secret: string; qrCodeUrl: string } | null>(null); // 存储设置密钥和二维码
+const verificationCode = ref(''); // 用户输入的验证码
+const disablePassword = ref(''); // 禁用时需要输入的密码
+
+// 计算属性判断当前是否处于 2FA 设置流程中
+const isSettingUp2FA = computed(() => setupData.value !== null);
+
+// 获取当前用户的 2FA 状态 (理想情况下后端应提供接口，这里暂时假设从 authStore 或其他地方获取)
+const checkTwoFactorStatus = async () => {
+  // 调用 store action 获取最新状态
+  await authStore.checkAuthStatus();
+  // 从 store 更新本地状态
+  twoFactorEnabled.value = authStore.user?.isTwoFactorEnabled ?? false;
+};
+
+onMounted(async () => { // 使 onMounted 异步
+  await checkTwoFactorStatus(); // 等待状态检查完成
+});
+

 const handleChangePassword = async () => {
-  message.value = ''; // 清除之前的消息
-  isSuccess.value = false;
+  changePasswordMessage.value = ''; // 清除之前的消息
+  changePasswordSuccess.value = false;

  if (newPassword.value !== confirmPassword.value) {
-    message.value = t('settings.changePassword.error.passwordsDoNotMatch');
+    changePasswordMessage.value = t('settings.changePassword.error.passwordsDoNotMatch');
    return;
  }

+  // 可选：添加前端密码复杂度校验
  // 可选：添加前端密码复杂度校验

-  loading.value = true;
+  changePasswordLoading.value = true;
  try {
    await authStore.changePassword(currentPassword.value, newPassword.value);
-    message.value = t('settings.changePassword.success');
-    isSuccess.value = true;
+    changePasswordMessage.value = t('settings.changePassword.success');
+    changePasswordSuccess.value = true;
    // 清空表单
    currentPassword.value = '';
    newPassword.value = '';
    confirmPassword.value = '';
  } catch (error: any) {
    console.error('修改密码失败:', error);
-    message.value = error.message || t('settings.changePassword.error.generic');
-    isSuccess.value = false;
+    changePasswordMessage.value = error.message || t('settings.changePassword.error.generic');
+    changePasswordSuccess.value = false;
  } finally {
-    loading.value = false;
+    changePasswordLoading.value = false;
  }
 };
+
+// --- 2FA 相关方法 ---
+
+// 开始设置 2FA
+const handleSetup2FA = async () => {
+  twoFactorMessage.value = '';
+  twoFactorSuccess.value = false;
+  twoFactorLoading.value = true;
+  setupData.value = null; // 清除旧数据
+  verificationCode.value = ''; // 清除验证码
+
+  try {
+    const response = await axios.post<{ secret: string; qrCodeUrl: string }>('/api/v1/auth/2fa/setup');
+    setupData.value = response.data;
+  } catch (error: any) {
+    console.error('开始设置 2FA 失败:', error);
+    twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.setupFailed');
+  } finally {
+    twoFactorLoading.value = false;
+  }
+};
+
+// 验证并激活 2FA
+const handleVerifyAndActivate2FA = async () => {
+  if (!setupData.value || !verificationCode.value) {
+    twoFactorMessage.value = t('settings.twoFactor.error.codeRequired');
+    return;
+  }
+
+  twoFactorMessage.value = '';
+  twoFactorSuccess.value = false;
+  twoFactorLoading.value = true;
+
+  try {
+    await axios.post('/api/v1/auth/2fa/verify', { token: verificationCode.value });
+    twoFactorMessage.value = t('settings.twoFactor.success.activated');
+    twoFactorSuccess.value = true;
+    twoFactorEnabled.value = true; // 更新状态
+    setupData.value = null; // 清除设置数据
+    verificationCode.value = '';
+  } catch (error: any) {
+    console.error('验证并激活 2FA 失败:', error);
+    twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.verificationFailed');
+  } finally {
+    twoFactorLoading.value = false;
+  }
+};
+
+// 禁用 2FA
+const handleDisable2FA = async () => {
+  if (!disablePassword.value) {
+      twoFactorMessage.value = t('settings.twoFactor.error.passwordRequiredForDisable');
+      return;
+  }
+  twoFactorMessage.value = '';
+  twoFactorSuccess.value = false;
+  twoFactorLoading.value = true;
+
+  try {
+    await axios.delete('/api/v1/auth/2fa', { data: { password: disablePassword.value } }); // DELETE 请求体通过 data 发送
+    twoFactorMessage.value = t('settings.twoFactor.success.disabled');
+    twoFactorSuccess.value = true;
+    twoFactorEnabled.value = false; // 更新状态
+    disablePassword.value = ''; // 清空密码
+  } catch (error: any) {
+    console.error('禁用 2FA 失败:', error);
+    twoFactorMessage.value = error.response?.data?.message || t('settings.twoFactor.error.disableFailed');
+  } finally {
+    twoFactorLoading.value = false;
+  }
+};
+
+// 取消设置流程
+const cancelSetup = () => {
+    setupData.value = null;
+    verificationCode.value = '';
+    twoFactorMessage.value = '';
+};
+
 </script>

 <style scoped>
@@ -93,7 +245,8 @@ label {
  margin-bottom: 5px;
 }

-input[type="password"] {
+input[type="password"],
+input[type="text"] {
  width: 100%;
  padding: 8px;
  box-sizing: border-box;
@@ -109,6 +262,25 @@ button:disabled {
  opacity: 0.6;
 }

+hr {
+    border: none;
+    border-top: 1px solid #eee;
+    margin: 30px 0;
+}
+
+code {
+    background-color: #f1f1f1;
+    padding: 2px 4px;
+    border-radius: 3px;
+    font-family: monospace;
+}
+
+img {
+    display: block;
+    margin: 10px 0;
+    max-width: 200px; /* 限制二维码大小 */
+}
+
 .success-message {
  color: green;
  margin-top: 10px;