Optimize: oauth2 login

src/App.vue

@@ -1,10 +1,34 @@
 <script setup lang="ts">
+import { onMounted } from "vue";
 import Header from "./components/Header.vue";
 import { RouterView } from "vue-router";
-import { roomStore } from "./stores/room";
-const room = roomStore();
+import { ElNotification } from "element-plus";
+import { userStore } from "@/stores/user";
+import { roomStore } from "@/stores/room";
+import { userInfo as userInfoApi } from "@/services/apis/auth";
 
-localStorage.login === "true" ? (room.login = true) : false;
+const { state: userInfo_, execute: reqUserInfo } = userInfoApi();
+const userState = userStore();
+
+const initApp = async () => {
+  try {
+    await reqUserInfo({
+      headers: {
+        Authorization: localStorage.getItem("userToken") || ""
+      }
+    });
+    if (userInfo_.value) {
+      userState.userInfo = userInfo_.value;
+      roomStore().login = true;
+    }
+  } catch (err: any) {
+    console.error(err);
+  }
+};
+
+onMounted(() => {
+  initApp();
+});
 </script>
 
 <template>

src/components/Header.vue

@@ -80,10 +80,6 @@ const menuLinks = computed(() => {
       </div>
       <div class="hidden lg:flex lg:flex-1 lg:justify-end">
         <DarkModeSwitcher />
-        <UserInfo />
-        <span v-if="room.login" class="cursor-pointer ml-5">
-          <MoonIcon width="18" height="18" color="#e4e4e7" />
-        </span>
       </div>
     </nav>
 

src/components/icons/Person.vue

@@ -8,7 +8,7 @@ const props = withDefaults(
   {
     width: "15",
     height: "15",
-    color: "#ffff",
+    color: "#ffff"
   }
 );
 </script>
@@ -21,7 +21,7 @@ const props = withDefaults(
     xmlns="http://www.w3.org/2000/svg"
   >
     <path
-      d="M3.24182 2.32181C3.3919 2.23132 3.5784 2.22601 3.73338 2.30781L12.7334 7.05781C12.8974 7.14436 13 7.31457 13 7.5C13 7.68543 12.8974 7.85564 12.7334 7.94219L3.73338 12.6922C3.5784 12.774 3.3919 12.7687 3.24182 12.6782C3.09175 12.5877 3 12.4252 3 12.25V2.75C3 2.57476 3.09175 2.4123 3.24182 2.32181ZM4 3.57925V11.4207L11.4288 7.5L4 3.57925Z"
+      d="M7.5 0.875C5.49797 0.875 3.875 2.49797 3.875 4.5C3.875 6.15288 4.98124 7.54738 6.49373 7.98351C5.2997 8.12901 4.27557 8.55134 3.50407 9.31167C2.52216 10.2794 2.02502 11.72 2.02502 13.5999C2.02502 13.8623 2.23769 14.0749 2.50002 14.0749C2.76236 14.0749 2.97502 13.8623 2.97502 13.5999C2.97502 11.8799 3.42786 10.7206 4.17091 9.9883C4.91536 9.25463 6.02674 8.87499 7.49995 8.87499C8.97317 8.87499 10.0846 9.25463 10.8291 9.98831C11.5721 10.7206 12.025 11.8799 12.025 13.5999C12.025 13.8623 12.2376 14.0749 12.5 14.0749C12.7623 14.075 12.975 13.8623 12.975 13.6C12.975 11.72 12.4778 10.2794 11.4959 9.31166C10.7244 8.55135 9.70025 8.12903 8.50625 7.98352C10.0187 7.5474 11.125 6.15289 11.125 4.5C11.125 2.49797 9.50203 0.875 7.5 0.875ZM4.825 4.5C4.825 3.02264 6.02264 1.825 7.5 1.825C8.97736 1.825 10.175 3.02264 10.175 4.5C10.175 5.97736 8.97736 7.175 7.5 7.175C6.02264 7.175 4.825 5.97736 4.825 4.5Z"
       fill="currentColor"
       fill-rule="evenodd"
       clip-rule="evenodd"

src/main.ts

@@ -14,15 +14,16 @@ import MoonIcon from "./components/icons/Moon.vue";
 import PlayIcon from "./components/icons/Play.vue";
 import EditIcon from "./components/icons/Edit.vue";
 import TrashIcon from "./components/icons/Trash.vue";
+import PersonIcon from "./components/icons/Person.vue";
 
 const app = createApp(App);
 app
   .component("SunIcon", SunIcon)
   .component("MoonIcon", MoonIcon)
   .component("PlayIcon", PlayIcon)
   .component("EditIcon", EditIcon)
-  .component("TrashIcon", TrashIcon);
-
+  .component("TrashIcon", TrashIcon)
+  .component("PersonIcon", PersonIcon);
 app.use(createPinia());
 app.use(router);
 

src/services/apis/auth.ts

@@ -44,7 +44,7 @@ export const loginWithOAuth2 = useDefineApi<any, { url: string }>({
 });
 
 // oauth2 callback
-export const getUseInfo = useDefineApi<
+export const oAuth2Callback = useDefineApi<
   {
     data: {
       code: string;
@@ -56,3 +56,14 @@ export const getUseInfo = useDefineApi<
 >({
   method: "POST"
 });
+
+// 获取个人信息
+export const userInfo = useDefineApi<
+  {
+    headers: { Authorization: string };
+  },
+  { username: string }
+>({
+  url: "/api/user/me",
+  method: "GET"
+});

src/stores/user.ts

@@ -0,0 +1,12 @@
+import { ref } from "vue";
+import { defineStore } from "pinia";
+
+export const userStore = defineStore("userStore", () => {
+  const userInfo = ref<{
+    username: string;
+  }>();
+
+  return {
+    userInfo
+  };
+});

src/types/User.ts

@@ -0,0 +1,3 @@
+export interface BaseUserInfo {
+  username: string;
+}

src/views/oAuth2/callback.vue

@@ -4,14 +4,14 @@ import { useRouteQuery, useRouteParams } from "@vueuse/router";
 import { ElNotification, ElMessage } from "element-plus";
 import { roomStore } from "@/stores/room";
 import router from "@/router/index";
-import { getUseInfo } from "@/services/apis/auth";
+import { oAuth2Callback, userInfo } from "@/services/apis/auth";
 
 const room = roomStore();
 
 const code = useRouteQuery("code");
 const state = useRouteQuery("state");
 const platform = useRouteParams("platform");
-const { state: userToken, execute } = getUseInfo();
+const { state: userToken, execute } = oAuth2Callback();
 const isLoading = ref(true);
 const redirect = async () => {
   try {
@@ -22,9 +22,32 @@ const redirect = async () => {
       },
       url: "/oauth2/callback/" + platform.value
     });
+
     if (userToken.value) {
-      isLoading.value = false;
       localStorage.setItem("userToken", userToken.value.token);
+      await getUserInfo();
+    }
+  } catch (err: any) {
+    console.error(err);
+    ElNotification({
+      title: "错误",
+      message: err.response.data.error || err.message,
+      type: "error"
+    });
+  }
+};
+
+const getUserInfo = async () => {
+  const { state, execute } = userInfo();
+  try {
+    await execute({
+      headers: {
+        Authorization: userToken.value?.token ?? ""
+      }
+    });
+    if (state.value) {
+      isLoading.value = false;
+      localStorage.setItem("uname", state.value.username);
       room.login = true;
       router.push("/");
     }
@@ -40,7 +63,6 @@ const redirect = async () => {
 
 onMounted(async () => {
   await redirect();
-  console.log(code.value, state.value);
 });
 </script>