16. 接入多租户的功能

src/api/axios.ts

@@ -25,15 +25,16 @@ const axiosInstance = axios.create({
 
 axiosInstance.interceptors.request.use(
   (config: AxiosRequestConfig) => {
-    // TODO 芋艿：临时代码
+    // 获取 tenantId
+    const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
     config.headers = {
       ...config.headers,
-      'tenant-id': 1
+      'tenant-id': info ? info[SystemStoreEnum.TENANT_INFO]['tenantId'] : ''
     }
+
     // 白名单校验
     if (includes(fetchAllowList, config.url)) return config
     // 获取 token
-    const info = getLocalStorage(StorageEnum.GO_SYSTEM_STORE)
     // 重新登录
     if (!info) {
       routerTurnByName(PageEnum.BASE_LOGIN_NAME)

src/api/path/system.api.ts

@@ -43,3 +43,13 @@ export const reqCheckApi = async (data: any) => {
     httpErrorHandle()
   }
 }
+
+// 使用租户名，获得租户编号
+export const getTenantIdByNameApi = async (name: string) => {
+  try {
+    const res = await http(RequestHttpEnum.GET)(`${ModuleTypeEnum.SYSTEM}/tenant/get-id-by-name?name=` + name)
+    return res
+  } catch (err) {
+    httpErrorHandle()
+  }
+}

src/i18n/en/index.ts

@@ -4,7 +4,8 @@ import project from './project'
 const global = {
   doc_addr: 'Document',
   code_addr: 'Code',
-  form_account: 'Please enter your account or email',
+  form_tenant: 'Please enter your tenant',
+  form_account: 'Please enter your account',
   form_password: 'Please enter your password',
   // header
   doc: 'Document',

src/i18n/zh/index.ts

@@ -4,7 +4,8 @@ import project from './project'
 const global = {
   doc_addr: '文档地址',
   code_addr: '仓库地址',
-  form_account: '请输入账号或邮箱',
+  tenant_account: '请输入租户名',
+  form_account: '请输入账号',
   form_password: '请输入密码',
   // 头部
   doc: '说明文档',

src/store/modules/systemStore/systemStore.d.ts

@@ -14,18 +14,18 @@ export interface UserInfoType {
   [SystemStoreUserInfoEnum.NICK_NAME]?: string,
 }
 
-export interface FetchInfoType {
-  OSSUrl?: string,
+export interface TenantInfoType {
+  tenantId?: number,
 }
 
 export enum SystemStoreEnum {
   // 用户
   USER_INFO = 'userInfo',
   // 请求
-  FETCH_INFO = 'fetchInfo'
+  TENANT_INFO = 'tenantInfo',
 }
 
 export interface SystemStoreType {
   [SystemStoreEnum.USER_INFO]: UserInfoType
-  [SystemStoreEnum.FETCH_INFO]: FetchInfoType
+  [SystemStoreEnum.TENANT_INFO]: TenantInfoType
 }

src/store/modules/systemStore/systemStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from 'pinia'
-import { SystemStoreType, UserInfoType } from './systemStore.d'
+import { SystemStoreType, UserInfoType, TenantInfoType } from './systemStore.d'
 import { setLocalStorage, getLocalStorage } from '@/utils'
 import { StorageEnum } from '@/enums/storageEnum'
 
@@ -16,11 +16,17 @@ export const useSystemStore = defineStore({
       userName: undefined,
       userToken: undefined,
       nickName: undefined
+    },
+    tenantInfo: {
+      tenantId: undefined
     }
   },
   getters: {
     getUserInfo(): UserInfoType {
       return this.userInfo
+    },
+    getTenantInfo(): TenantInfoType {
+      return this.tenantInfo
     }
   },
   actions: {

src/views/login/index.vue

@@ -56,6 +56,18 @@
                 :model="formInline"
                 :rules="rules"
               >
+                <n-form-item path="tenantId" v-if="tenantEnable ==='true'">
+                  <n-input
+                      v-model:value="formInline.tenantName"
+                      :placeholder="$t('global.form_tenant')"
+                  >
+                    <template #prefix>
+                      <n-icon size="18">
+                        <TvOutlineIcon></TvOutlineIcon>
+                      </n-icon>
+                    </template>
+                  </n-input>
+                </n-form-item>
                 <n-form-item path="username">
                   <n-input
                     v-model:value="formInline.username"
@@ -135,7 +147,7 @@ import { PageEnum } from '@/enums/pageEnum'
 import { StorageEnum } from '@/enums/storageEnum'
 import { icon } from '@/plugins'
 import { routerTurnByName } from '@/utils'
-import { loginApi } from '@/api/path'
+import {getTenantIdByNameApi, loginApi} from '@/api/path'
 import { Verify } from '@/components/Verifition'
 
 interface FormState {
@@ -144,7 +156,7 @@ interface FormState {
 }
 
 const { GO_SYSTEM_STORE } = StorageEnum
-const { PersonOutlineIcon, LockClosedOutlineIcon } = icon.ionicons5
+const { PersonOutlineIcon, LockClosedOutlineIcon, TvOutlineIcon } = icon.ionicons5
 
 const formRef = ref()
 const loading = ref(false)
@@ -156,6 +168,7 @@ const systemStore = useSystemStore()
 const t = window['$t']
 
 const formInline = reactive({
+  tenantName: '芋道源码',
   username: 'admin',
   password: 'admin123',
 })
@@ -171,6 +184,11 @@ const rules = {
     message: t('global.form_password'),
     trigger: 'blur',
   },
+  tenantName: {
+    required: true,
+    message: t('global.form_password'),
+    trigger: 'blur',
+  },
 }
 
 // 定时器
@@ -207,9 +225,8 @@ const shuffleHandle = () => {
 // 验证码
 const verify = ref()
 const captchaType = ref('blockPuzzle') // blockPuzzle 滑块 clickWord 点击文字
-
-// 获取验证码
 const captchaEnable = import.meta.env.VITE_APP_CAPTCHA_ENABLE
+// 获取验证码
 const getCode = async () => {
   // 情况一，未开启：则直接登录
   if (captchaEnable === 'false') {
@@ -221,10 +238,28 @@ const getCode = async () => {
   }
 }
 
+// 多租户
+const tenantEnable = import.meta.env.VITE_APP_TENANT_ENABLE
+// 获取租户 ID
+const getTenantId = async () => {
+  if (tenantEnable === 'true') {
+    const res = await getTenantIdByNameApi(formInline.tenantName)
+    if (res && res.data) {
+      // 存储到 pinia
+      systemStore.setItem(SystemStoreEnum.TENANT_INFO, {
+        tenantId: res.data
+      })
+    }
+  }
+}
+
 // 登录
 const handleSubmit = async (params: any) => {
   formRef.value.validate(async (errors: any) => {
     if (!errors) {
+      // 获取租户 ID
+      await getTenantId()
+
       const { username, password } = formInline
       loading.value = true
       // 提交请求【登录】