添加登录

src/api/auth.js

+import request from '@/utils/http/index';
+
+export const login = (data) => {
+  return request.post('/login/doLogin', data);
+};
+
+export const getUserInfo = () => {
+  return request.get('/login/userInfo');
+};
+
+export const getToken = () => {
+  return request.get('/login/token');
+};
+
+export const logout = () => {
+  return request.get('/login/logout');
+};
+
+export const isLogin = () => {
+  return request.get('/login/isLogin');
+};

src/api/user.js

-import request from '@/utils/http/index';
-
-export const login = (data) => {
-  console.log(request, '-0------');
-  return request.post('/login/doLogin', data);
-};

src/components/TenantModal/index.vue

+<template>
+  <vxe-modal v-model="showModal" title="租户选择" show-footer>
+    <div
+      v-for="tenant in getUserTenants"
+      :key="tenant.code"
+      @click="handleClick(tenant)"
+      class="p-2 mb-2 rounded flex items-center justify-between text-center border hover:cursor-pointer hover:bg-gray-100"
+    >
+      <div>
+        <span class="font-bold">{{ tenant.name }}</span>
+        <span class="ml-4">{{ tenant.code }}</span>
+      </div>
+      <el-icon><DArrowRight /></el-icon>
+    </div>
+    <template #footer>
+      <el-button @click="handleCancel">取消</el-button>
+    </template>
+  </vxe-modal>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+  import { useUserStore } from '@/stores/modules/user';
+
+  const emits = defineEmits(['cancel', 'select']);
+  const showModal = ref(false);
+  const { getUserTenants } = useUserStore();
+
+  const handleCancel = () => {
+    showModal.value = false;
+    emits('cancel');
+  };
+  const handleClick = (tenant) => {
+    showModal.value = false;
+    emits('select', tenant);
+  };
+
+  const openModal = () => (showModal.value = true);
+  defineExpose({
+    openModal,
+  });
+</script>
+<style lang="scss" scoped></style>

src/layouts/components/Header/ToolBarRight.vue

@@ -25,7 +25,7 @@
   import Avatar from './components/Avatar.vue';
 
   const userStore = useUserStore();
-  const username = computed(() => userStore.userInfo.name);
+  const username = computed(() => userStore.userInfo?.name);
 </script>
 
 <style scoped lang="scss">

src/layouts/components/Header/components/Avatar.vue

@@ -43,13 +43,9 @@
       cancelButtonText: '取消',
       type: 'warning',
     }).then(async () => {
-      // 1.执行退出登录接口
-      // await logoutApi();
+      await userStore.logout();
 
-      // 2.清除 Token
-      userStore.setToken('');
-
-      // 3.重定向到登陆页
+      // 重定向到登陆页
       router.replace(LOGIN_URL);
       ElMessage.success('退出登录成功！');
     });

src/stores/modules/user.js

 import { defineStore } from 'pinia';
 import piniaPersistConfig from '@/stores/helper/persist';
+import { logout } from '@/api/auth';
 
 export const useUserStore = defineStore({
   id: 'admin-user',
   state: () => ({
     token: '',
-    userInfo: { name: 'Admin' },
+    userInfo: null,
+    isTenant: false, // 是否操作了租户
+    tenant: null, // 当前租户
   }),
-  getters: {},
+  getters: {
+    getUserTenants() {
+      return (
+        this.userInfo?.tenants || [
+          { code: 123, name: 'tenant1', id: '1' },
+          { code: 1234, name: 'tenant2tenant2', id: '2' },
+          { code: 1235, name: 'tenant3tenant2tenant2', id: '3' },
+        ]
+      );
+    },
+  },
   actions: {
     // Set Token
     setToken(token) {
@@ -17,6 +30,20 @@ export const useUserStore = defineStore({
     setUserInfo(userInfo) {
       this.userInfo = userInfo;
     },
+    // Set isTenant
+    setIsTenant(flag) {
+      this.isTenant = flag;
+    },
+    setTenant(tenant) {
+      this.tenant = tenant;
+    },
+    async logout() {
+      await logout();
+      this.token = '';
+      this.userInfo = null;
+      this.isTenant = false;
+      this.tenant = null;
+    },
   },
   persist: piniaPersistConfig('admin-user'),
 });

src/utils/http/index.js

@@ -5,6 +5,7 @@ import { AxiosCanceler } from './axiosCancel';
 import { stringify } from 'qs';
 import router from '@/router';
 import { LOGIN_URL } from '@/config';
+import { useUserStore } from '@/stores/modules/user';
 
 const envs = getAppEnvConfig();
 const defaultConfig = {
@@ -29,7 +30,14 @@ class RequestClient {
         }
         config.cancel && axiosCanceler.addPending(config);
 
+        const { tenant } = useUserStore();
         // 设置请求头
+        config.headers['tenantId'] = tenant?.id;
+
+        if (config.method.toLocaleUpperCase() == 'GET') {
+          config.headers['Content-Type'] = 'application/x-www-form-urlencoded';
+        }
+        console.log('request-----', config);
         return config;
       },
       (error) => {
@@ -56,7 +64,7 @@ class RequestClient {
         // 全局拦截请求错误信息
         if (data.code && data.code !== 200) {
           ElMessage({
-            message: data.msg,
+            message: data.message,
             type: 'error',
             plain: true,
           });
@@ -78,8 +86,6 @@ class RequestClient {
         if (!window.navigator.onLine) router.replace('/500');
       }
     );
-
-    console.log('constructor---', this.instance, axiosCanceler);
   }
 
   get(url, params, _object = {}) {

src/views/login/index.vue

@@ -57,29 +57,35 @@
         </el-form>
       </div>
     </div>
+
+    <TenantModal ref="tenantRef" @cancel="onCancelTenant" @select="onSelectTenant" />
   </div>
 </template>
 
 <script setup>
-  import { ref, reactive } from 'vue';
-  import { useRouter } from 'vue-router';
+  import { ref, reactive, onMounted } from 'vue';
+  import { useRoute, useRouter } from 'vue-router';
   import { initDynamicRouter } from '@/router/modules/dynamicRouter';
   import { useUserStore } from '@/stores/modules/user';
   import { useTabsStore } from '@/stores/modules/tabs';
   import { useKeepAliveStore } from '@/stores/modules/keepAlive';
   import { HOME_URL } from '@/config';
+  import { login, getToken, getUserInfo } from '@/api/auth';
+  import TenantModal from '@/components/TenantModal/index.vue';
 
   const userStore = useUserStore();
   const tabsStore = useTabsStore();
   const keepAliveStore = useKeepAliveStore();
+  const tenantRef = ref();
   const loginLoading = ref(false);
   const passwordType = ref('password');
 
   const router = useRouter();
+  const route = useRoute();
 
   const formInline = reactive({
-    username: '',
-    password: '',
+    username: 'admin',
+    password: '123456',
     autoLogin: false,
   });
 
@@ -91,28 +97,70 @@
     ],
   });
 
+  /**
+   * 取消租户选择
+   */
+  const onCancelTenant = () => {
+    // 取消选择租户，执行退出登录
+    userStore.logout();
+    loginLoading.value = false;
+  };
+
+  /**
+   * 选择租户
+   * @param tenant 租户
+   */
+  const onSelectTenant = async (tenant) => {
+    userStore.setIsTenant(true);
+    userStore.setTenant(tenant);
+
+    // 初始化动态路由
+    await initDynamicRouter();
+
+    // 3.清空 tabs、keepAlive 数据
+    tabsStore.setTabs([]);
+    keepAliveStore.setKeepAliveName([]);
+
+    // 4.跳转到首页
+    router.push(HOME_URL);
+    loginLoading.value = false;
+  };
+
+  /**
+   * 登录
+   */
   const handleLogin = async () => {
     loginLoading.value = true;
     try {
       // 1.调用接口
-      // ...
-      // 2.设置 Token
-      userStore.setToken('hasToken123');
-
-      // 初始化动态路由
-      await initDynamicRouter();
-
-      // 3.清空 tabs、keepAlive 数据
-      tabsStore.setTabs([]);
-      keepAliveStore.setKeepAliveName([]);
+      await login(formInline);
 
-      // 4.跳转到首页
-      router.push(HOME_URL);
+      // 2.设置 Token
+      const { result } = await getToken();
+      userStore.setToken(result);
+
+      // 获取用户详情
+      const { result: userInfo } = await getUserInfo();
+      userStore.setUserInfo(userInfo);
+
+      // 如果有多个租户，需要选择租户进入系统
+      if (userInfo.tenants.length > 1) {
+        tenantRef.value.openModal();
+      } else {
+        await onSelectTenant(userInfo.tenants[0] || null);
+      }
     } catch (e) {
       console.log('error', e);
+      loginLoading.value = false;
     }
-    loginLoading.value = false;
   };
+
+  onMounted(() => {
+    // 路由中携带参数tenant
+    if (route.params?.tenant) {
+      tenantRef.value.openModal();
+    }
+  });
 </script>
 <style lang="scss" scoped>
   .view-account {

vite.config.js

@@ -55,7 +55,7 @@ export default defineConfig(({ command, mode }) => {
       port: VITE_PORT,
       proxy: {
         '/api': {
-          target: 'http://8.137.124.157:8080',
+          target: 'http://8.152.205.9:8080',
           changeOrigin: true,
           rewrite: (path) => path.replace(/^\/api/, ''),
         },