refactor: 多租户适配调整

2025-12-11 21:19:02 +08:00
parent 9176298b44
commit 888e17e405
12 changed files with 260 additions and 74 deletions
--- a/src/api/auth-api.ts
+++ b/src/api/auth-api.ts
@@ -4,18 +4,16 @@ const AUTH_BASE_URL = "/api/v1/auth";

 const AuthAPI = {
  /** 登录接口*/
-  login(data: LoginFormData) {
-    const formData = new FormData();
-    formData.append("username", data.username);
-    formData.append("password", data.password);
-    formData.append("captchaKey", data.captchaKey);
-    formData.append("captchaCode", data.captchaCode);
+  login(data: LoginRequest) {
    return request<any, LoginResult>({
      url: `${AUTH_BASE_URL}/login`,
      method: "post",
-      data: formData,
-      headers: {
-        "Content-Type": "multipart/form-data",
+      data: {
+        username: data.username,
+        password: data.password,
+        captchaId: data.captchaId,
+        captchaCode: data.captchaCode,
+        tenantId: data.tenantId,
      },
    });
  },
@@ -51,18 +49,20 @@ const AuthAPI = {

 export default AuthAPI;

-/** 登录表单数据 */
-export interface LoginFormData {
+/** 登录请求参数 */
+export interface LoginRequest {
  /** 用户名 */
  username: string;
  /** 密码 */
  password: string;
-  /** 验证码缓存key */
-  captchaKey: string;
+  /** 验证码缓存ID */
+  captchaId?: string;
  /** 验证码 */
-  captchaCode: string;
-  /** 记住我 */
-  rememberMe: boolean;
+  captchaCode?: string;
+  /** 记住我（前端使用，不发送到后端） */
+  rememberMe?: boolean;
+  /** 租户ID（可选，多租户模式下用于指定租户） */
+  tenantId?: number;
 }

 /** 登录响应 */
@@ -79,8 +79,8 @@ export interface LoginResult {

 /** 验证码信息 */
 export interface CaptchaInfo {
-  /** 验证码缓存key */
-  captchaKey: string;
+  /** 验证码缓存ID */
+  captchaId: string;
  /** 验证码图片Base64字符串 */
  captchaBase64: string;
 }
--- a/src/api/system/tenant-api.ts
+++ b/src/api/system/tenant-api.ts
@@ -1,6 +1,6 @@
 import request from "@/utils/request";

-const TENANT_BASE_URL = "/api/v1/tenant";
+const TENANT_BASE_URL = "/api/v1/tenants";

 /**
 * 租户信息
@@ -37,7 +37,7 @@ const TenantAPI = {
   */
  getTenantList() {
    return request<any, TenantInfo[]>({
-      url: `${TENANT_BASE_URL}/list`,
+      url: `${TENANT_BASE_URL}`,
      method: "get",
    });
  },
@@ -59,7 +59,7 @@ const TenantAPI = {
   */
  switchTenant(tenantId: number) {
    return request<any, TenantInfo>({
-      url: `${TENANT_BASE_URL}/switch/${tenantId}`,
+      url: `${TENANT_BASE_URL}/${tenantId}/switch`,
      method: "post",
    });
  },
--- a/src/components/TenantSelect/index.vue
+++ b/src/components/TenantSelect/index.vue
@@ -35,7 +35,17 @@ const tenantStore = useTenantStoreHook();

 // 当前租户名称
 const currentTenantName = computed(() => {
-  return tenantStore.currentTenant?.name || "未选择租户";
+  if (tenantStore.currentTenant?.name) {
+    return tenantStore.currentTenant.name;
+  }
+  // 如果当前租户信息不存在，尝试从租户列表中查找
+  if (tenantStore.currentTenantId) {
+    const tenant = tenantStore.tenantList.find((t) => t.id === tenantStore.currentTenantId);
+    if (tenant) {
+      return tenant.name;
+    }
+  }
+  return "未选择租户";
 });

 // 当前租户ID
@@ -74,30 +84,35 @@ onMounted(() => {
 .tenant-select {
  display: flex;
  align-items: center;
-  padding: 0 12px;
+  height: 100%;
+  padding: 0 8px;
  cursor: pointer;
+  border-radius: 4px;
  transition: all 0.3s;

  &__icon {
    margin-right: 6px;
    font-size: 18px;
-    color: var(--el-text-color-regular);
+    color: inherit;
+    transition: color 0.3s;
  }

  &__name {
-    max-width: 120px;
+    max-width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 14px;
-    color: var(--el-text-color-regular);
+    color: inherit;
    white-space: nowrap;
+    transition: color 0.3s;
  }

  &__arrow {
    margin-left: 6px;
    font-size: 12px;
-    color: var(--el-text-color-secondary);
-    transition: transform 0.3s;
+    color: inherit;
+    opacity: 0.7;
+    transition: all 0.3s;
  }

  &:hover {
@@ -107,6 +122,11 @@ onMounted(() => {
    .tenant-select__name {
      color: var(--el-color-primary);
    }
+
+    .tenant-select__arrow {
+      color: var(--el-color-primary);
+      opacity: 1;
+    }
  }
 }

--- a/src/enums/api/code-enum.ts
+++ b/src/enums/api/code-enum.ts
@@ -20,4 +20,9 @@ export const enum ApiCodeEnum {
   * 刷新令牌无效或过期
   */
  REFRESH_TOKEN_INVALID = "A0231",
+
+  /**
+   * 需要选择租户
+   */
+  CHOOSE_TENANT = "A0250",
 }
--- a/src/layouts/components/NavBar/components/NavbarActions.vue
+++ b/src/layouts/components/NavBar/components/NavbarActions.vue
@@ -100,9 +100,19 @@ const router = useRouter();
 // 是否为桌面设备
 const isDesktop = computed(() => appStore.device === DeviceEnum.DESKTOP);

-// 是否显示租户选择（如果用户有多个租户或已选择租户）
+// 是否显示租户选择（如果用户有多个租户，则显示租户选择器）
+// 最小侵入：只有在多租户模式下（租户列表长度 > 1）才显示
 const showTenantSelect = computed(() => {
-  return tenantStore.tenantList.length > 0 || tenantStore.currentTenantId !== null;
+  // 如果租户列表为空，不显示
+  if (tenantStore.tenantList.length === 0) {
+    return false;
+  }
+  // 如果只有一个租户，也不显示（单租户模式，用户无感知）
+  if (tenantStore.tenantList.length === 1) {
+    return false;
+  }
+  // 多个租户时才显示
+  return true;
 });

 /**
@@ -257,6 +267,16 @@ function handleSettingsClick() {
  .user-profile__name {
    color: rgba(255, 255, 255, 0.85);
  }
+
+  // 租户选择器在白色文字模式下的样式
+  :deep(.tenant-select) {
+    color: rgba(255, 255, 255, 0.85);
+
+    &:hover {
+      color: #fff;
+      background: rgba(255, 255, 255, 0.1);
+    }
+  }
 }

 // 深色文字样式（用于浅色背景：明亮主题下的左侧布局）
@@ -278,6 +298,16 @@ function handleSettingsClick() {
  .user-profile__name {
    color: var(--el-text-color-regular) !important;
  }
+
+  // 租户选择器在深色文字模式下的样式
+  :deep(.tenant-select) {
+    color: var(--el-text-color-regular) !important;
+
+    &:hover {
+      color: var(--el-color-primary) !important;
+      background: rgba(0, 0, 0, 0.04);
+    }
+  }
 }

 // 确保下拉菜单中的图标不受影响
--- a/src/plugins/permission.ts
+++ b/src/plugins/permission.ts
@@ -2,6 +2,7 @@ import type { RouteRecordRaw } from "vue-router";
 import NProgress from "@/utils/nprogress";
 import router from "@/router";
 import { usePermissionStore, useUserStore } from "@/store";
+import { useTenantStoreHook } from "@/store/modules/tenant-store";

 export function setupPermission() {
  const whiteList = ["/login"];
@@ -38,6 +39,12 @@ export function setupPermission() {
          await userStore.getUserInfo();
        }

+        // 登录成功后，尝试获取租户列表和当前租户信息（如果启用多租户）
+        // 最小侵入：如果接口失败，不影响正常流程（可能是单租户模式）
+        const tenantStore = useTenantStoreHook();
+        // 由 tenantStore 内部自行判断前端多租户开关（VITE_APP_TENANT_ENABLED）
+        await tenantStore.prepareTenantContextAfterLogin();
+
        const dynamicRoutes = await permissionStore.generateRoutes();
        dynamicRoutes.forEach((route: RouteRecordRaw) => {
          router.addRoute(route);
--- a/src/store/modules/tenant-store.ts
+++ b/src/store/modules/tenant-store.ts
@@ -1,6 +1,9 @@
 import { store } from "@/store";
 import TenantAPI, { type TenantInfo } from "@/api/system/tenant-api";

+// 前端多租户开关；默认开启，若后端未启用多租户可在 .env 设置 VITE_APP_TENANT_ENABLED=false
+const TENANT_ENABLED = import.meta.env.VITE_APP_TENANT_ENABLED !== "false";
+
 const TENANT_ID_KEY = "current_tenant_id";
 const TENANT_INFO_KEY = "current_tenant_info";

@@ -52,6 +55,39 @@ export const useTenantStore = defineStore("tenant", () => {
    });
  }

+  /**
+   * 登录后初始化租户：获取列表并尽量确定当前租户
+   * - 忽略错误，以便单租户模式不受影响
+   */
+  // 登录后准备租户上下文：先取租户列表，再用后端返回的当前租户；若单租户则自动选中
+  async function prepareTenantContextAfterLogin() {
+    if (!TENANT_ENABLED) {
+      return;
+    }
+
+    try {
+      await fetchTenantList();
+
+      if (tenantList.value.length > 0 && !currentTenantId.value) {
+        try {
+          const currentTenantInfo = await TenantAPI.getCurrentTenant();
+          if (currentTenantInfo) {
+            setCurrentTenant(currentTenantInfo);
+          } else if (tenantList.value.length === 1) {
+            setCurrentTenant(tenantList.value[0]);
+          }
+        } catch (error) {
+          if (tenantList.value.length === 1) {
+            setCurrentTenant(tenantList.value[0]);
+          }
+          console.debug("获取当前租户信息失败（可能是单租户模式）:", error);
+        }
+      }
+    } catch (error) {
+      console.debug("获取租户列表失败（可能是单租户模式）:", error);
+    }
+  }
+
  /**
   * 设置当前租户
   *
@@ -120,6 +156,7 @@ export const useTenantStore = defineStore("tenant", () => {
    currentTenantId,
    currentTenant,
    tenantList,
+    prepareTenantContextAfterLogin,
    fetchTenantList,
    setCurrentTenant,
    switchTenant,
--- a/src/store/modules/user-store.ts
+++ b/src/store/modules/user-store.ts
@@ -1,6 +1,6 @@
 import { store } from "@/store";

-import AuthAPI, { type LoginFormData } from "@/api/auth-api";
+import AuthAPI, { type LoginRequest } from "@/api/auth-api";
 import UserAPI, { type UserInfo } from "@/api/system/user-api";

 import { AuthStorage } from "@/utils/auth";
@@ -18,16 +18,16 @@ export const useUserStore = defineStore("user", () => {
  /**
   * 登录
   *
-   * @param {LoginFormData}
+   * @param {LoginRequest}
   * @returns
   */
-  function login(LoginFormData: LoginFormData) {
+  function login(loginRequest: LoginRequest) {
    return new Promise<void>((resolve, reject) => {
-      AuthAPI.login(LoginFormData)
+      AuthAPI.login(loginRequest)
        .then((data) => {
          const { accessToken, refreshToken } = data;
          // 保存记住我状态和token
-          rememberMe.value = LoginFormData.rememberMe;
+          rememberMe.value = loginRequest.rememberMe ?? false;
          AuthStorage.setTokens(accessToken, refreshToken, rememberMe.value);
          resolve();
        })
--- a/src/utils/request.ts
+++ b/src/utils/request.ts
@@ -34,6 +34,7 @@ httpRequest.interceptors.request.use(
    }

    // 添加租户ID到请求头（如果存在）
+    // 注意：只有在登录成功后，tenantStore 才会初始化，所以这里需要 try-catch
    try {
      const tenantStore = useTenantStoreHook();
      const tenantId = tenantStore.currentTenantId;
@@ -41,8 +42,8 @@ httpRequest.interceptors.request.use(
        config.headers["tenant-id"] = String(tenantId);
      }
    } catch (error) {
-      // 如果租户 store 未初始化，忽略错误
-      console.debug("Tenant store not available:", error);
+      // 如果租户 store 未初始化（如登录前），忽略错误
+      // 这是正常的，因为多租户功能是可选的，未启用时不会初始化 tenantStore
    }

    return config;
@@ -70,6 +71,15 @@ httpRequest.interceptors.response.use(
      return data;
    }

+    // 特殊处理：需要选择租户（不显示错误提示，返回特殊对象供业务层处理）
+    if (code === ApiCodeEnum.CHOOSE_TENANT) {
+      return Promise.reject({
+        code: ApiCodeEnum.CHOOSE_TENANT,
+        data,
+        msg,
+      });
+    }
+
    // 业务错误
    ElMessage.error(msg || "系统出错");
    return Promise.reject(new Error(msg || "Business Error"));
--- a/src/views/login/components/Login.vue
+++ b/src/views/login/components/Login.vue
@@ -87,7 +87,34 @@
    </div>

    <!-- 租户选择对话框 -->
-    <TenantSelectDialog v-model="tenantDialogVisible" @confirm="handleTenantSelected" />
+    <el-dialog
+      v-model="tenantDialogVisible"
+      title="选择登录租户"
+      width="500px"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :show-close="false"
+    >
+      <div class="tenant-select-content">
+        <p class="tenant-select-tip">检测到你的账号属于多个租户，请选择登录租户：</p>
+        <el-radio-group v-model="selectedTenantId" class="tenant-radio-group">
+          <el-radio
+            v-for="tenant in pendingTenants"
+            :key="tenant.id"
+            :label="tenant.id"
+            class="tenant-radio"
+          >
+            {{ tenant.name }}
+          </el-radio>
+        </el-radio-group>
+      </div>
+      <template #footer>
+        <el-button @click="tenantDialogVisible = false">取消</el-button>
+        <el-button type="primary" :disabled="!selectedTenantId" @click="handleTenantSelected">
+          继续
+        </el-button>
+      </template>
+    </el-dialog>

    <!-- 第三方登录 -->
    <div class="third-party-login">
@@ -115,13 +142,12 @@
 </template>
 <script setup lang="ts">
 import type { FormInstance } from "element-plus";
-import AuthAPI, { type LoginFormData } from "@/api/auth-api";
+import AuthAPI, { type LoginRequest } from "@/api/auth-api";
 import router from "@/router";
 import { useUserStore } from "@/store";
-import { useTenantStoreHook } from "@/store/modules/tenant-store";
 import CommonWrapper from "@/components/CommonWrapper/index.vue";
 import { AuthStorage } from "@/utils/auth";
-import TenantSelectDialog from "@/components/TenantSelectDialog/index.vue";
+import { ApiCodeEnum } from "@/enums/api/code-enum";

 const { t } = useI18n();
 const userStore = useUserStore();
@@ -139,12 +165,12 @@ const captchaBase64 = ref();
 const rememberMe = AuthStorage.getRememberMe();
 // 租户选择对话框
 const tenantDialogVisible = ref(false);
-const tenantStore = useTenantStoreHook();
+const selectedTenantId = ref<number | null>(null);

-const loginFormData = ref<LoginFormData>({
+const loginFormData = ref<LoginRequest>({
  username: "admin",
  password: "123456",
-  captchaKey: "",
+  captchaId: "",
  captchaCode: "",
  rememberMe,
 });
@@ -186,12 +212,15 @@ function getCaptcha() {
  codeLoading.value = true;
  AuthAPI.getCaptcha()
    .then((data) => {
-      loginFormData.value.captchaKey = data.captchaKey;
+      loginFormData.value.captchaId = data.captchaId;
      captchaBase64.value = data.captchaBase64;
    })
    .finally(() => (codeLoading.value = false));
 }

+// 待选择的租户列表
+const pendingTenants = ref<Array<{ id: number; name: string }>>([]);
+
 /**
 * 登录提交
 */
@@ -204,34 +233,25 @@ async function handleLoginSubmit() {
    loading.value = true;

    // 2. 执行登录
-    await userStore.login(loginFormData.value);
-
-    // 3. 登录成功后，检查是否需要选择租户
    try {
-      await tenantStore.fetchTenantList();
-      const tenantList = tenantStore.tenantList;
-
-      // 如果用户有多个租户，且没有当前租户，显示租户选择对话框
-      if (tenantList.length > 1 && !tenantStore.currentTenantId) {
+      await userStore.login(loginFormData.value);
+      // 登录成功，跳转到目标页面
+      const redirectPath = (route.query.redirect as string) || "/";
+      await router.push(decodeURIComponent(redirectPath));
+    } catch (error: any) {
+      // 检查是否是 choose_tenant 响应
+      if (error?.code === ApiCodeEnum.CHOOSE_TENANT && error?.data?.tenants) {
+        // 需要选择租户
+        pendingTenants.value = error.data.tenants;
        tenantDialogVisible.value = true;
        return; // 等待用户选择租户
      }
-
-      // 如果只有一个租户，自动设置
-      if (tenantList.length === 1 && !tenantStore.currentTenantId) {
-        await tenantStore.switchTenant(tenantList[0].id);
-      }
-    } catch (error) {
-      // 如果获取租户列表失败，不影响登录流程（可能是单租户模式）
-      console.warn("获取租户列表失败（可能是单租户模式）:", error);
+      // 其他错误，刷新验证码并显示错误
+      getCaptcha();
+      throw error;
    }
-
-    // 4. 跳转到目标页面
-    const redirectPath = (route.query.redirect as string) || "/";
-    await router.push(decodeURIComponent(redirectPath));
  } catch (error) {
    // 统一错误处理
-    getCaptcha(); // 刷新验证码
    console.error("登录失败:", error);
  } finally {
    loading.value = false;
@@ -242,8 +262,27 @@ async function handleLoginSubmit() {
 * 租户选择确认后的处理
 */
 async function handleTenantSelected() {
-  const redirectPath = (route.query.redirect as string) || "/";
-  await router.push(decodeURIComponent(redirectPath));
+  if (!selectedTenantId.value) {
+    ElMessage.warning("请选择租户");
+    return;
+  }
+
+  try {
+    loading.value = true;
+    // 使用选中的租户ID重新登录（将 tenantId 设置到表单数据中）
+    const loginData = { ...loginFormData.value, tenantId: selectedTenantId.value };
+    await userStore.login(loginData);
+    // 登录成功，关闭对话框并跳转
+    tenantDialogVisible.value = false;
+    const redirectPath = (route.query.redirect as string) || "/";
+    await router.push(decodeURIComponent(redirectPath));
+  } catch (error) {
+    // 登录失败，刷新验证码
+    getCaptcha();
+    console.error("登录失败:", error);
+  } finally {
+    loading.value = false;
+  }
 }

 // 检查输入大小写
@@ -293,4 +332,42 @@ function toOtherForm(type: "register" | "resetPwd") {
    }
  }
 }
+
+.tenant-select-content {
+  padding: 20px 0;
+
+  .tenant-select-tip {
+    margin: 0 0 20px;
+    font-size: 14px;
+    color: var(--el-text-color-regular);
+  }
+
+  .tenant-radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    width: 100%;
+
+    .tenant-radio {
+      display: flex;
+      align-items: center;
+      padding: 12px 16px;
+      border: 1px solid var(--el-border-color);
+      border-radius: 8px;
+      transition: all 0.3s;
+
+      &:hover {
+        background-color: var(--el-color-primary-light-9);
+        border-color: var(--el-color-primary);
+      }
+
+      :deep(.el-radio__input.is-checked) {
+        + .el-radio__label {
+          font-weight: 500;
+          color: var(--el-color-primary);
+        }
+      }
+    }
+  }
+}
 </style>
--- a/src/views/login/components/Register.vue
+++ b/src/views/login/components/Register.vue
@@ -98,7 +98,7 @@
 import type { FormInstance } from "element-plus";
 import { Lock } from "@element-plus/icons-vue";
 import { useI18n } from "vue-i18n";
-import AuthAPI, { type LoginFormData } from "@/api/auth-api";
+import AuthAPI, { type LoginRequest } from "@/api/auth-api";

 const { t } = useI18n();

@@ -113,7 +113,7 @@ const isCapsLock = ref(false); // 是否大写锁定
 const captchaBase64 = ref(); // 验证码图片Base64字符串
 const isRead = ref(false);

-interface Model extends LoginFormData {
+interface Model extends LoginRequest {
  confirmPassword: string;
 }

@@ -121,7 +121,7 @@ const model = ref<Model>({
  username: "admin",
  password: "123456",
  confirmPassword: "",
-  captchaKey: "",
+  captchaId: "",
  captchaCode: "",
  rememberMe: false,
 });
@@ -182,7 +182,7 @@ function getCaptcha() {
  codeLoading.value = true;
  AuthAPI.getCaptcha()
    .then((data) => {
-      model.value.captchaKey = data.captchaKey;
+      model.value.captchaId = data.captchaId;
      captchaBase64.value = data.captchaBase64;
    })
    .finally(() => (codeLoading.value = false));