refactor: 完善三方账号登录

Author: Charles7c

src/router/index.ts

@@ -48,7 +48,6 @@ export const constantRoutes: RouteRecordRaw[] = [
   },
   {
     path: '/social/callback',
-    name: 'SocialCallback',
     component: () => import('@/views/login/social/index.vue'),
     meta: { hidden: true }
   },

src/router/permission.ts

@@ -4,7 +4,7 @@ import { getToken } from '@/utils/auth'
 import { isHttp } from '@/utils/validate'
 
 /** 免登录白名单 */
-const whiteList = ['/login', '/register']
+const whiteList = ['/login', '/social/callback']
 
 /** 是否已经生成过路由表 */
 let hasRouteFlag = false

src/views/login/index.vue

@@ -41,14 +41,14 @@
       </a-col>
     </a-row>
 
-    <GiThemeBtn class="theme-btn" />
-    <Background />
-
-    <!--    <div class="footer">
+    <div v-if="isDesktop" class="footer">
       <div class="beian">
         <div class="below text" v-html="appStore.getCopyright()"></div>
       </div>
-    </div>-->
+    </div>
+
+    <GiThemeBtn class="theme-btn" />
+    <Background />
   </div>
 </template>
 
@@ -59,9 +59,11 @@ import AccountLogin from './components/account/index.vue'
 import PhoneLogin from './components/phone/index.vue'
 import EmailLogin from './components/email/index.vue'
 import { useAppStore } from '@/stores'
+import { useDevice } from '@/hooks'
 
 defineOptions({ name: 'Login' })
 
+const { isDesktop } = useDevice()
 const appStore = useAppStore()
 const title = computed(() => appStore.getTitle())
 const logo = computed(() => appStore.getLogo())
@@ -83,6 +85,7 @@ const onOauth = async (source: string) => {
 .login {
   height: 100%;
   display: flex;
+  flex-direction: column;
   justify-content: center;
   align-items: center;
   background-color: var(--color-bg-5);
@@ -240,11 +243,11 @@ const onOauth = async (source: string) => {
 .footer {
   align-items: center;
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
+  position: absolute;
+  bottom: 10px;
+  z-index: 999;
   .beian {
     .text {
-      color: #41464f;
       font-size: 12px;
       font-weight: 400;
       letter-spacing: 0.2px;

src/views/login/social/index.vue

@@ -3,30 +3,58 @@
     <div></div>
   </a-spin>
 </template>
+
 <script setup lang="ts">
-import { isLogin } from '@/utils/auth'
 import { bindSocialAccount } from '@/apis'
+import { Message } from '@arco-design/web-vue'
 import { useRoute, useRouter } from 'vue-router'
-import { getCurrentInstance, ref } from 'vue'
-const { proxy } = getCurrentInstance() as any
+import { isLogin } from '@/utils/auth'
+
 const route = useRoute()
 const router = useRouter()
-const loading = ref(false)
 const source = route.query.source as string
+const loading = ref(false)
 
-/**
- * 绑定第三方账号
- */
-const handleBindSocial = () => {
+// 三方账号登录
+const handleSocialLogin = () => {
   if (loading.value) return
   loading.value = true
   const { redirect, ...othersQuery } = router.currentRoute.value.query
+  userStore
+    .socialLogin(source, othersQuery)
+    .then(() => {
+      router.push({
+        path: (redirect as string) || '/',
+        query: {
+          ...othersQuery
+        }
+      })
+      Message.success('欢迎使用')
+    })
+    .catch(() => {
+      router.push({
+        name: 'Login',
+        query: {
+          ...othersQuery
+        }
+      })
+    })
+    .finally(() => {
+      loading.value = false
+    })
+}
+
+// 绑定三方账号
+const handleBindSocial = () => {
+  if (loading.value) return
+  loading.value = true
+  const { ...othersQuery } = router.currentRoute.value.query
   bindSocialAccount(source, othersQuery)
     .then((res) => {
       router.push({
         path: '/setting/profile',
         query: {
-          tab: 'security-setting'
+          ...othersQuery
         }
       })
       proxy.$message.success(res.msg)
@@ -35,7 +63,7 @@ const handleBindSocial = () => {
       router.push({
         path: '/setting/profile',
         query: {
-          tab: 'security-setting'
+          ...othersQuery
         }
       })
     })
@@ -46,12 +74,8 @@ const handleBindSocial = () => {
 
 if (isLogin()) {
   handleBindSocial()
-}
-</script>
-
-<script lang="ts">
-export default {
-  name: 'SocialCallback'
+} else {
+  handleSocialLogin()
 }
 </script>