up

frontend/src/views/Login.vue

@@ -1,76 +1,88 @@
 <template>
-  <div v-if="!accessToken">
-    <button @click="">Login with GitHub</button>
-  </div>
-  <div v-else>
-    <p>Access Token: {{ accessToken }}</p>
-    <button @click="logout">Logout</button>
+  <div>
+    <button @click="handleGithubLogin">Login with GitHub</button>
   </div>
 </template>
 
-<script>
-import { reactive } from 'vue';
+<script setup> 
+import { reactive,onMounted } from 'vue';
+import axios from 'axios';
 
-export default {
-  setup() {
+const auth = reactive({
+  type: "github",
+  redirectUrl: null,
+  code: null,
+  state: null,
+});
 
-    const auth = reactive({
-      type: "github",
-      redirectUrl: null,
-      code: null,
-      state: null,
-    });
+const handleGithubLogin = async()=> {
+  try {
+    const response = await axios.get('http://localhost:8000/auth/idt')
+    const redirectUrl = response.data.redirectUri
+    auth.state = response.data.state
+    auth.redirectUrl = redirectUrl
+    localStorage.setItem("state",response.data.state)
+    console.log("state:",response.data.state,"url:",response.data.redirectUri)
+    window.location.href = redirectUrl
+  } catch (error) {
+    console.error(error)
+  }
+}
 
-    // Function to handle GitHub login button click
-    const handleGithubLogin = async () => {
-      try {
-        // Send a GET request to /auth/github to get the redirect URL
-        const response = await axios.get('/auth/github')
-        auth.redirectUrl = response.data.redirectUrl
-        auth.state = response.data.state
-
-        window.location.href = state.redirectUrl
-      } catch (error) {
-        console.error(error)
-      }
-    };
-
-
-    const handleCallback = async () => {
-      // const code = this.$route.query.code
-      // const status = this.$route.query.status
-      const urlParams = new URLSearchParams(window.location.search)
-      const code = urlParams.get('code')
-      const status = urlParams.get('state')
-      try {
-        const response = await axios.post('/auth/signin/sso', {
-          code,
-          status
-        })
-        const jwt = response.data.jwt
-        localStorage.setItem('jwt', jwt)
-      } catch (error) {
-        console.error(error);
-        if (error.response.status != 200) {
-          console.log('授权失败')
-        }
-      }
-    };
-
-    const logout = () => {
-      localStorage.setItem('jwt','');
-    };
-
-    // // 监听 URL 变化，处理从 GitHub 授权页面回调回来的 code 参数
-    // const handleUrlChange = () => {
-    //   const urlParams = new URLSearchParams(window.location.search);
-    //   const code = urlParams.get('code');
-    //   if (code) {
-    //     handleCallback(code);
-    //   }
-    // };
-    // window.addEventListener('load', handleUrlChange);
-
-  },
+const handleCallback = async () => {
+  // const code = this.$route.query.code
+  // const status = this.$route.query.status
+  const urlParams = new URLSearchParams(window.location.search)
+  const code = urlParams.get('code')
+  const status = urlParams.get('state')
+  try {
+    const response = await axios.post('/auth/signin/sso', {
+      code,
+      status
+    })
+    const jwt = response.data.jwt
+    localStorage.setItem('jwt', jwt)
+  } catch (error) {
+    console.error(error);
+    if (error.response.status != 200) {
+      console.log('授权失败')
+    }
+  }
 };
+async function getToken() {
+  try {
+    const url = new URL(window.location.href)
+    const code = url.searchParams.get('code')
+    const state = url.searchParams.get('state')
+    const postData = new URLSearchParams({
+      code: code,
+      state: state
+    })
+    const jwtResponse = await axios.post('http://localhost:8000/auth/signin/sso', postData)
+    const jwt = jwtResponse.data.jwt
+    localStorage.setItem('jwt', jwt)
+    console.log("jwt:",jwtResponse)
+    // window.location.href = '/'
+  } catch (error) {
+    console.error(error)
+  }
+}
+
+const logout = () => {
+  localStorage.setItem('jwt','');
+};
+
+// // 监听 URL 变化，处理从 GitHub 授权页面回调回来的 code 参数
+// const handleUrlChange = () => {
+//   const urlParams = new URLSearchParams(window.location.search);
+//   const code = urlParams.get('code');
+//   if (code) {
+//     handleCallback(code);
+//   }
+// };
+// window.addEventListener('load', handleUrlChange);
+
+onMounted(() => {
+  getToken()
+})
 </script>