store.userInfo

components.d.ts

@@ -10,6 +10,7 @@ declare module 'vue' {
     AFormItem: typeof import('ant-design-vue/es')['FormItem']
     AInput: typeof import('ant-design-vue/es')['Input']
     AInputNumber: typeof import('ant-design-vue/es')['InputNumber']
+    AInputPassword: typeof import('ant-design-vue/es')['InputPassword']
     ASpin: typeof import('ant-design-vue/es')['Spin']
   }
 }

src/features/Login/Login.vue

@@ -14,9 +14,18 @@
             <a-input v-model:value="accountValue" placeholder="请输入用户名" />
           </a-form-item>
           <a-form-item>
-            <a-input v-model:value="password" placeholder="请输入密码" />
+            <a-input-password
+              v-model:value="password"
+              type="pa"
+              placeholder="请输入密码"
+              @keypress.enter="login"
+            />
           </a-form-item>
 
+          <div class="tw-text-red-500 tw-pb-4">
+            {{ errorInfo }}
+          </div>
+
           <a-button type="primary" @click="login">立即登录</a-button>
         </div>
       </div>
@@ -27,18 +36,33 @@
 <script setup lang="ts">
 import { loginByUsername } from "@/api/loginPage";
 import { ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+import { useMainStore } from "@/store";
+const store = useMainStore();
 
 let accountValue = ref("");
 let password = ref("");
-const rootOrgId = "1";
+const route = useRoute();
+const rootOrgId = route.query.rootOrgId as string;
+const router = useRouter();
+if (!rootOrgId) {
+  router.push("/?rootOrgId=1");
+}
+
+let errorInfo = ref("");
 
 async function login() {
-  const res = await loginByUsername({
-    accountValue: accountValue.value,
-    password: password.value,
-    rootOrgId: rootOrgId,
-  });
-  console.log(res);
+  try {
+    const res = await loginByUsername({
+      accountValue: accountValue.value,
+      password: password.value,
+      rootOrgId: rootOrgId,
+    });
+    console.log(res);
+    store.setUserInfo(res.data);
+  } catch (error) {
+    errorInfo.value = (<any>error).response.data.desc;
+  }
 }
 </script>
 

src/store/index.ts

@@ -1,3 +1,4 @@
+import { Role } from "@/types";
 import { defineStore } from "pinia";
 
 // main is the name of the store. It is unique across your application
@@ -7,8 +8,20 @@ export const useMainStore = defineStore("main", {
   state: () => {
     return {
       globalMask: false,
+      userInfo: {
+        userId: -1,
+        displayName: "",
+        rootOrgId: "",
+        rootOrgName: "",
+        token: "",
+        roleList: [] as Role[],
+      },
     };
   },
   getters: {},
-  actions: {},
+  actions: {
+    setUserInfo(res: any) {
+      this.userInfo = res;
+    },
+  },
 });

src/types/index.ts

@@ -0,0 +1,5 @@
+export interface Role {
+  roleId: number;
+  roleCode: "ORG_ADMIN" | "SUPER_ADMIN" | "ROOT_ORG_ADMIN" | "COURSE_ADMIN";
+  roleName: string;
+}