feat: 增加 sso 单点登录

apps/web-antd/src/api/request.ts

@@ -51,6 +51,9 @@ function createRequestClient(baseURL: string, options?: RequestClientOptions) {
   async function doRefreshToken() {
     const accessStore = useAccessStore();
     const refreshToken = accessStore.refreshToken as string;
+    if (!refreshToken) {
+      throw new Error('Refresh token is null!');
+    }
     const resp = await refreshTokenApi(refreshToken);
     const newToken = resp?.data?.data?.accessToken;
     // add by 芋艿：这里一定要抛出 resp.data，从而触发 authenticateResponseInterceptor 中，刷新令牌失败！！！

apps/web-antd/src/router/routes/core.ts

@@ -97,6 +97,14 @@ const coreRoutes: RouteRecordRaw[] = [
           title: $t('page.auth.login'),
         },
       },
+      {
+        name: 'SSOLogin',
+        path: 'sso-login',
+        component: () => import('#/views/_core/authentication/sso-login.vue'),
+        meta: {
+          title: $t('page.auth.login'),
+        },
+      }
     ],
   },
 ];

apps/web-antd/src/store/auth.ts

@@ -108,7 +108,7 @@ export const useAuthStore = defineStore('auth', () => {
     let authPermissionInfo: AuthPermissionInfo | null = null;
     authPermissionInfo = await getAuthPermissionInfoApi();
     // userStore
-    userStore.setUserInfo(authPermissionInfo.user); // TODO @芋艿：这里有报错
+    userStore.setUserInfo(authPermissionInfo.user);
     userStore.setUserRoles(authPermissionInfo.roles);
     // accessStore
     accessStore.setAccessMenus(authPermissionInfo.menus);

apps/web-antd/src/views/_core/authentication/social-login.vue

@@ -16,7 +16,7 @@ import { getTenantSimpleList, getTenantByWebsite } from '#/api/core/auth';
 
 const { tenantEnable, captchaEnable } = useAppConfig(import.meta.env, import.meta.env.PROD);
 
-defineOptions({ name: 'Login' });
+defineOptions({ name: 'SocialLogin' });
 
 const authStore = useAuthStore();
 const accessStore = useAccessStore();
@@ -34,6 +34,7 @@ const fetchTenantList = async () => {
   if (!tenantEnable) {
     return;
   }
+
   try {
     // 获取租户列表、域名对应租户
     const websiteTenantPromise = getTenantByWebsite(window.location.hostname);

apps/web-antd/src/views/_core/authentication/sso-login.vue

@@ -0,0 +1,205 @@
+<script lang="ts" setup>
+import type { VbenFormSchema } from '#/adapter/form';
+
+import { AuthenticationAuthTitle, VbenButton } from '@vben/common-ui';
+
+import { useVbenForm } from '#/adapter/form';
+import { computed, reactive, ref, onMounted } from 'vue';
+import { useRoute } from 'vue-router';
+import { authorize, getAuthorize } from '#/api/system/oauth2/open';
+
+defineOptions({ name: 'SSOLogin' });
+
+const { query } = useRoute(); // 路由参数
+
+const client = ref({
+  name: '',
+  logo: ''
+}); // 客户端信息
+
+const queryParams = reactive({
+  responseType: '',
+  clientId: '',
+  redirectUri: '',
+  state: '',
+  scopes: [] as string[] // 优先从 query 参数获取；如果未传递，从后端获取
+}); // URL 上的 client_id、scope 等参数
+
+const loading = ref(false); // 表单是否提交中
+
+/** 初始化授权信息 */
+const init = async () => {
+  // 防止在没有登录的情况下循环弹窗
+  if (typeof query.client_id === 'undefined') {
+    return;
+  }
+  // 解析参数
+  // 例如说【自动授权不通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read%20user.write
+  // 例如说【自动授权通过】：client_id=default&redirect_uri=https%3A%2F%2Fwww.iocoder.cn&response_type=code&scope=user.read
+  queryParams.responseType = query.response_type as string;
+  queryParams.clientId = query.client_id as string;
+  queryParams.redirectUri = query.redirect_uri as string;
+  queryParams.state = query.state as string;
+  if (query.scope) {
+    queryParams.scopes = (query.scope as string).split(' ');
+  }
+
+  // 如果有 scope 参数，先执行一次自动授权，看看是否之前都授权过了。
+  if (queryParams.scopes.length > 0) {
+    const data = await doAuthorize(true, queryParams.scopes, []);
+    if (data) {
+      location.href = data;
+      return;
+    }
+  }
+
+  // 1.1 获取授权页的基本信息
+  const data = await getAuthorize(queryParams.clientId);
+  client.value = data.client;
+  // 1.2 解析 scope
+  let scopes;
+  // 如果 params.scope 非空，则过滤下返回的 scopes
+  if (queryParams.scopes.length > 0) {
+    scopes = data.scopes.filter(scope => queryParams.scopes.includes(scope.key));
+    // 如果 params.scope 为空，则使用返回的 scopes 设置它
+  } else {
+    scopes = data.scopes;
+    queryParams.scopes = scopes.map(scope => scope.key);
+  }
+
+  // 2.设置表单的初始值
+  formApi.setFieldValue('scopes', scopes.filter(scope => scope.value).map(scope => scope.key));
+};
+
+/** 处理授权的提交 */
+const handleSubmit = async (approved: boolean) => {
+  // 计算 checkedScopes + uncheckedScopes
+  let checkedScopes: string[];
+  let uncheckedScopes: string[];
+  if (approved) {
+    // 同意授权，按照用户的选择
+    checkedScopes = (await formApi.getValues()).scopes;
+    uncheckedScopes = queryParams.scopes.filter((item) => checkedScopes.indexOf(item) === -1);
+  } else {
+    // 拒绝，则都是取消
+    checkedScopes = [];
+    uncheckedScopes = queryParams.scopes;
+  }
+
+  // 提交授权的请求
+  loading.value = true;
+  try {
+    const data = await doAuthorize(false, checkedScopes, uncheckedScopes);
+    if (!data) {
+      return;
+    }
+    // 跳转授权成功后的回调地址
+    location.href = data;
+  } finally {
+    loading.value = false;
+  }
+};
+
+/** 调用授权 API 接口 */
+const doAuthorize = (autoApprove: boolean, checkedScopes: string[], uncheckedScopes: string[]) => {
+  return authorize(
+    queryParams.responseType,
+    queryParams.clientId,
+    queryParams.redirectUri,
+    queryParams.state,
+    autoApprove,
+    checkedScopes,
+    uncheckedScopes
+  );
+};
+
+/** 格式化 scope 文本 */
+const formatScope = (scope: string) => {
+  // 格式化 scope 授权范围，方便用户理解。
+  // 这里仅仅是一个 demo，可以考虑录入到字典数据中，例如说字典类型 "system_oauth2_scope"，它的每个 scope 都是一条字典数据。
+  switch (scope) {
+    case 'user.read':
+      return '访问你的个人信息';
+    case 'user.write':
+      return '修改你的个人信息';
+    default:
+      return scope;
+  }
+};
+
+const formSchema = computed((): VbenFormSchema[] => {
+  return [
+    {
+      fieldName: 'scopes',
+      label: '授权范围',
+      component: 'CheckboxGroup',
+      componentProps: {
+        options: queryParams.scopes.map(scope => ({
+          label: formatScope(scope),
+          value: scope
+        })),
+        class: 'flex flex-col gap-2'
+      },
+    },
+  ];
+});
+
+const [Form, formApi] = useVbenForm(
+  reactive({
+    commonConfig: {
+      hideLabel: true,
+      hideRequiredMark: true,
+    },
+    schema: formSchema,
+    showDefaultActions: false,
+  }),
+);
+
+/** 初始化 */
+onMounted(() => {
+  init();
+})
+</script>
+
+<template>
+  <div @keydown.enter.prevent="handleSubmit(true)">
+    <AuthenticationAuthTitle>
+      <slot name="title">
+        {{ `${client.name} 👋🏻` }}
+      </slot>
+      <template #desc>
+        <span class="text-muted-foreground">
+          此第三方应用请求获得以下权限：
+        </span>
+      </template>
+    </AuthenticationAuthTitle>
+
+    <Form />
+
+    <div class="flex gap-2">
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        :loading="loading"
+        aria-label="login"
+        class="w-2/3"
+        @click="handleSubmit(true)"
+      >
+        同意授权
+      </VbenButton>
+      <VbenButton
+        :class="{
+          'cursor-wait': loading,
+        }"
+        :loading="loading"
+        aria-label="login"
+        class="w-1/3"
+        variant="outline"
+        @click="handleSubmit(false)"
+      >
+        拒绝
+      </VbenButton>
+    </div>
+  </div>
+</template>

packages/effects/common-ui/src/ui/authentication/index.ts

@@ -5,4 +5,5 @@ export { default as AuthenticationLogin } from './login.vue';
 export { default as AuthenticationQrCodeLogin } from './qrcode-login.vue';
 export { default as AuthenticationRegister } from './register.vue';
 export { default as DocLink } from './doc-link.vue';
+export { default as AuthenticationAuthTitle } from './auth-title.vue';
 export type { AuthenticationProps } from './types';

packages/effects/common-ui/src/ui/authentication/qrcode-login.vue

@@ -52,7 +52,8 @@ const props = withDefaults(defineProps<Props>(), {
 
 const router = useRouter();
 
-const text = ref('https://vben.vvbin.cn');
+// const text = ref('https://vben.vvbin.cn');
+const text = ref('https://t.zsxq.com/FUtQd');
 
 const qrcode = useQRCode(text, {
   errorCorrectionLevel: 'H',