!271 添加社交登录页面，修复登录多次重定向问题

Merge pull request !271 from dhb52/master

src/api/login/index.ts

@@ -47,6 +47,18 @@ export const smsLogin = (data: SmsLoginVO) => {
   return request.post({ url: '/system/auth/sms-login', data })
 }
 
+// 社交快捷登录，使用 code 授权码
+export function socialLogin(type: string, code: string, state: string) {
+  return request.post({
+    url: '/system/auth/social-login',
+    data: {
+      type,
+      code,
+      state
+    }
+  })
+}
+
 // 社交授权的跳转
 export const socialAuthRedirect = (type: number, redirectUri: string) => {
   return request.get({

src/api/login/types.ts

@@ -2,6 +2,9 @@ export type UserLoginVO = {
   username: string
   password: string
   captchaVerification: string
+  socialType?: string
+  socialCode?: string
+  socialState?: string
 }
 
 export type TokenType = {

src/locales/zh-CN.ts

@@ -141,6 +141,7 @@ export default {
   },
   router: {
     login: '登录',
+    socialLogin: '社交登录',
     home: '首页',
     analysis: '分析页',
     workplace: '工作台'

src/router/modules/remaining.ts

@@ -186,12 +186,12 @@ const remainingRouter: AppRouteRecordRaw[] = [
     }
   },
   {
-    path: '/sso',
-    component: () => import('@/views/Login/Login.vue'),
-    name: 'SSOLogin',
+    path: '/social-login',
+    component: () => import('@/views/Login/SocialLogin.vue'),
+    name: 'SocialLogin',
     meta: {
       hidden: true,
-      title: t('router.login'),
+      title: t('router.socialLogin'),
       noTagsView: true
     }
   },
@@ -333,6 +333,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
   {
     path: '/mall/product', // 商品中心
     component: Layout,
+    name: 'Product',
     meta: {
       hidden: true
     },
@@ -394,6 +395,7 @@ const remainingRouter: AppRouteRecordRaw[] = [
   {
     path: '/mall/trade', // 交易中心
     component: Layout,
+    name: 'Trade',
     meta: {
       hidden: true
     },

src/views/Login/Login.vue

@@ -55,7 +55,7 @@
             <!-- 注册 -->
             <RegisterForm class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
             <!-- 三方登录 -->
-            <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" />
+            <!-- <SSOLoginVue class="m-auto h-auto p-20px lt-xl:(rounded-3xl light:bg-white)" /> -->
           </div>
         </Transition>
       </div>
@@ -70,7 +70,7 @@ import { useAppStore } from '@/store/modules/app'
 import { ThemeSwitch } from '@/layout/components/ThemeSwitch'
 import { LocaleDropdown } from '@/layout/components/LocaleDropdown'
 
-import { LoginForm, MobileForm, QrCodeForm, RegisterForm, SSOLoginVue } from './components'
+import { LoginForm, MobileForm, QrCodeForm, RegisterForm } from './components'
 
 defineOptions({ name: 'Login' })
 

src/views/Login/components/LoginForm.vue

@@ -284,8 +284,13 @@ const doSocialLogin = async (type: number) => {
       })
     }
     // 计算 redirectUri
+    // tricky: type、redirect需要先encode一次，否则钉钉回调会丢失。
+    // 配合 Login/SocialLogin.vue#getUrlValue() 使用
     const redirectUri =
-      location.origin + '/social-login?type=' + type + '&redirect=' + (redirect.value || '/')
+      location.origin +
+      '/social-login?' +
+      encodeURIComponent(`type=${type}&redirect=${redirect.value || '/'}`)
+
     // 进行跳转
     const res = await LoginApi.socialAuthRedirect(type, encodeURIComponent(redirectUri))
     window.location.href = res