feat: 第三方登录认证功能和管理页

src/views/login/hooks/useLoginSource.ts

@@ -0,0 +1,82 @@
+import { getLoginSource, loginOAuth2URL } from '@/api/auth';
+import { parseUrlPath } from '@/plugins/file-static-url';
+import { defineAsyncComponent, nextTick, reactive, shallowRef } from 'vue';
+
+// 异步加载组件
+const cardLogin = defineAsyncComponent(
+  () => import('../components/CardLogin.vue')
+);
+
+// 当前组件
+export const currentComponent = shallowRef(cardLogin);
+
+/**登录认证源类型 */
+type LoginSourceType = {
+  /**认证标识 */
+  uid: string;
+  /**名称 */
+  name: string;
+  /**类型 */
+  type: string;
+  /**图标 */
+  icon: string;
+};
+
+/**登录认证源 */
+export const loginSourceState = reactive({
+  list: [] as LoginSourceType[],
+  selct: {
+    uid: '',
+    name: '',
+    type: '',
+    icon: '',
+  },
+});
+
+/**获取登录认证源 */
+export function fnGetLoginSource() {
+  getLoginSource().then(res => {
+    loginSourceState.list = res.data.map((item: Record<string, string>) => ({
+      ...item,
+      icon: parseUrlPath(item.icon),
+    }));
+  });
+}
+
+/**点击登录认证源 */
+export function fnClickLoginSource(item: LoginSourceType) {
+  loginSourceState.selct = { ...item };
+
+  let loadComponent: any = undefined;
+  switch (item.type) {
+    case 'LDAP':
+      loadComponent = defineAsyncComponent(
+        () => import('../components/CardLoginForLDAP.vue')
+      );
+      break;
+    case 'SMTP':
+      loadComponent = defineAsyncComponent(
+        () => import('../components/CardLoginForSMTP.vue')
+      );
+      break;
+    case 'OAuth2':
+      const redirectUri = loginOAuth2URL(item.uid);
+      window.location.href = redirectUri;
+      // window.open(redirectUri, '_blank');
+      break;
+    default:
+      fnClickLoginBack();
+  }
+  if (loadComponent) {
+    nextTick(() => {
+      currentComponent.value = loadComponent;
+    });
+  }
+}
+
+/**点击登录返回 */
+export function fnClickLoginBack() {
+  nextTick(() => {
+    currentComponent.value = cardLogin;
+  });
+}