feat: auth server integration

src/lib/router.ts

@@ -16,6 +16,7 @@ import QuestionIndex from '../pages/QuestionIndex.vue'
 import QuestionShow from '../pages/QuestionShow.vue'
 import UserIndex from '../pages/UserIndex.vue'
 import UserLogin from '../pages/UserLogin.vue'
+import UserLoginCallback from '../pages/UserLoginCallback.vue'
 
 declare module 'vue-router' {
   interface RouteMeta {
@@ -81,6 +82,13 @@ const routes: RouteRecordRaw[] = [
       title: '登录'
     }
   },
+  {
+    path: '/login/callback',
+    component: UserLoginCallback,
+    meta: {
+      title: '登录'
+    }
+  },
   {
     path: '/questions',
     component: QuestionIndex,

src/pages/UserIndex.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { useAxios } from '@vueuse/integrations/useAxios'
+import { showToast } from 'vant'
 
 import { useAxiosInstance } from '../lib/axios'
 import { useStore } from '../lib/store'
@@ -14,6 +15,20 @@ const { data: count } = useAxios<{
 }>('questions/count', useAxiosInstance(), {
   immediate: true
 })
+
+const redirect = (): void => {
+  useAxiosInstance().get<{
+    url: string
+  }>('token/redirect').then(({ data }) => {
+    location.href = data.url
+  }).catch((e) => {
+    console.error(e)
+    showToast({
+      type: 'fail',
+      message: '无法获取登录链接'
+    })
+  })
+}
 </script>
 
 <template>
@@ -50,7 +65,7 @@ const { data: count } = useAxios<{
         title="登录"
         center
         is-link
-        to="/login"
+        @click="redirect"
       />
     </van-cell-group>
 

src/pages/UserLogin.vue

@@ -4,6 +4,7 @@ import { useRouter } from 'vue-router'
 
 import { useAxiosInstance } from '../lib/axios'
 import { useStore } from '../lib/store'
+import type { TokenResponse } from '../types/login.ts'
 
 const store = useStore()
 
@@ -27,11 +28,7 @@ const submit = (): void => {
     return
   }
 
-  useAxiosInstance().post<{
-    access_token: string
-    expires_in: number
-    token_type: 'Bearer'
-  }>('token', form, {
+  useAxiosInstance().post<TokenResponse>('token', form, {
     headers: {
       'Content-Type': 'application/x-www-form-urlencoded'
     }

src/pages/UserLoginCallback.vue

@@ -0,0 +1,55 @@
+<script setup lang="ts">
+import { onMounted } from 'vue'
+import { useRouter } from 'vue-router'
+import { showToast, closeToast } from 'vant'
+
+import { useAxiosInstance } from '../lib/axios.ts'
+import { useStore } from '../lib/store.ts'
+import type { TokenResponse } from '../types/login.ts'
+
+const router = useRouter()
+
+const store = useStore()
+
+onMounted(() => {
+  showToast({
+    type: 'loading',
+    message: '请稍候...',
+    forbidClick: true,
+    duration: 0
+  })
+
+  useAxiosInstance().post<TokenResponse>('token/exchange', null, {
+    withCredentials: true
+  }).then(({ data }) => {
+    closeToast()
+    showToast({
+      type: 'success',
+      message: '登录成功',
+      duration: 1000
+    })
+
+    store.token = data.access_token
+
+    if (data.expires_in) {
+      store.tokenExpiry = Date.now() + data.expires_in * 1000
+    }
+
+    const url = sessionStorage.getItem('intendedUrl') ?? '/user'
+    sessionStorage.removeItem('intendedUrl')
+
+    router.replace(url)
+  }).catch((e) => {
+    console.error(e)
+
+    closeToast()
+    showToast({
+      type: 'fail',
+      message: '登录失败',
+      duration: 1000
+    })
+
+    router.replace('/user')
+  })
+})
+</script>

src/types/login.ts

@@ -0,0 +1,5 @@
+export interface TokenResponse {
+  access_token: string
+  expires_in: number
+  token_type: string
+}