增加 登录系统

src/router/index.ts

@@ -14,6 +14,14 @@ const routes = [
         // which is lazy-loaded when the route is visited.
         component: () => import('@/views/Home.vue'),
       },
+      {
+        path: 'auth/login',
+        name: 'Login',
+        // route level code-splitting
+        // this generates a separate chunk (Home-[hash].js) for this route
+        // which is lazy-loaded when the route is visited.
+        component: () => import('@/views/auth/Login.vue'),
+      },
     ],
   },
 ]

src/views/auth/Login.vue

@@ -0,0 +1,114 @@
+<template>
+  <div
+    class="d-flex text-center"
+    style="
+      width: 100%;
+      height: 100vh;
+      justify-content: center;
+      align-items: center;
+    "
+  >
+    <div>
+      <div>
+        <v-progress-circular
+          indeterminate
+          v-if="status == 0 || status == 3"
+        ></v-progress-circular>
+      </div>
+      <div class="mt-5">
+        <div v-if="status == 0">
+          <p>请稍后...</p>
+        </div>
+        <div v-if="status == 2">
+          <p>验证失败。</p>
+
+          <v-btn @click="restart" class="mt-3">重试</v-btn>
+        </div>
+        <div v-if="status == 3">
+          <p>正在验证...</p>
+        </div>
+        <div v-if="status == 4">
+          <p>验证失败。</p>
+
+          <v-btn @click="restart" class="mt-3">重试</v-btn>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import axios from "axios";
+import { ref } from "vue";
+import { useConfigStore } from "@/store/config";
+import { useUserStore } from "@/store/user";
+import router from "@/router";
+
+const status = ref(0);
+const configStore = useConfigStore();
+const userStore = useUserStore();
+
+console.log(configStore.accountServer);
+
+const restart = () => {
+  status.value = 0;
+  login();
+};
+
+// read the router query para
+const query = router.currentRoute.value.query;
+
+const login = () => {
+  status.value = 1;
+
+  // clear url
+  window.history.replaceState(null, "", window.location.pathname);
+
+  axios
+    .post(configStore.accountServer + "/public/auth_request", {
+      description: configStore.appName,
+      callback_uri: window.location.href,
+    })
+    .then((res) => {
+      if (res.data.url) {
+        window.location.href = res.data.url;
+      }
+
+      console.log(res.data);
+    })
+    .catch((err) => {
+      console.log(err);
+      status.value = 2;
+    });
+};
+
+const validate = () => {
+  status.value = 3;
+
+  axios
+    .get(
+      configStore.accountServer + "/public/auth_request/" + query.auth_request
+    )
+    .then((res) => {
+      if (res.data.refresh_token && res.data.token) {
+        userStore.login(res.data.refresh_token, res.data.token);
+
+        setTimeout(() => {
+          window.location.href = "/";
+        }, 100);
+      }
+
+      console.log(res.data);
+    })
+    .catch((err) => {
+      console.log(err);
+      status.value = 4;
+    });
+};
+
+if (query.auth_request != null) {
+  validate();
+} else {
+  login();
+}
+</script>