feat: chat auth (#3285)

ui/src/api/chat/chat.ts

@@ -1,4 +1,4 @@
-import {Result} from '@/request/Result'
+import { Result } from '@/request/Result'
 import {
   get,
   post,
@@ -9,16 +9,16 @@ import {
   download,
   exportFile,
 } from '@/request/chat/index'
-import {type ChatProfile} from '@/api/type/chat'
+import { type ChatProfile } from '@/api/type/chat'
-import {type Ref} from 'vue'
+import { type Ref } from 'vue'
 
 import useStore from '@/stores'
-import type {LoginRequest} from "@/api/type/user.ts";
+import type { LoginRequest } from '@/api/type/user'
 
-const prefix: any = {_value: '/workspace/'}
+const prefix: any = { _value: '/workspace/' }
 Object.defineProperty(prefix, 'value', {
   get: function () {
-    const {user} = useStore()
+    const { user } = useStore()
     return this._value + user.getWorkspaceId() + '/application'
   },
 })
@@ -31,7 +31,6 @@ Object.defineProperty(prefix, 'value', {
  */
 const open: (loading?: Ref<boolean>) => Promise<Result<string>> = (loading) => {
   return get('/open', {}, loading)
-
 }
 /**
  * 对话
@@ -46,7 +45,7 @@ const chatProfile: (assessToken: string, loading?: Ref<boolean>) => Promise<Resu
   assessToken,
   loading,
 ) => {
-  return get('/profile', {access_token: assessToken}, loading)
+  return get('/profile', { access_token: assessToken }, loading)
 }
 /**
  * 匿名认证
@@ -58,7 +57,7 @@ const anonymousAuthentication: (
   assessToken: string,
   loading?: Ref<boolean>,
 ) => Promise<Result<any>> = (assessToken, loading) => {
-  return post('/auth/anonymous', {access_token: assessToken}, {}, loading)
+  return post('/auth/anonymous', { access_token: assessToken }, {}, loading)
 }
 /**
  * 获取应用相关信息
@@ -69,30 +68,28 @@ const applicationProfile: (loading?: Ref<boolean>) => Promise<Result<any>> = (lo
   return get('/application/profile', {}, loading)
 }
 
-
 /**
  * 登录
  * @param request 登录接口请求表单
  * @param loading 接口加载器
  * @returns 认证数据
  */
-const login: (accessToken: string, request: LoginRequest, loading?: Ref<boolean>) => Promise<Result<any>> = (
+const login: (
   accessToken: string,
-  request,
+  request: LoginRequest,
-  loading,
+  loading?: Ref<boolean>,
-) => {
+) => Promise<Result<any>> = (accessToken: string, request, loading) => {
   return post('/auth/login/' + accessToken, request, undefined, loading)
 }
 
-const ldapLogin: (accessToken: string, request: LoginRequest, loading?: Ref<boolean>) => Promise<Result<any>> = (
+const ldapLogin: (
   accessToken: string,
-  request,
+  request: LoginRequest,
-  loading,
+  loading?: Ref<boolean>,
-) => {
+) => Promise<Result<any>> = (accessToken: string, request, loading) => {
   return post('/auth/ldap/login/' + accessToken, request, undefined, loading)
 }
 
-
 /**
  * 获取验证码
  * @param loading 接口加载器
@@ -114,35 +111,38 @@ const getQrSource: (loading?: Ref<boolean>) => Promise<Result<any>> = (loading)
 
 const getDingCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
   code,
-  loading
+  loading,
 ) => {
-  return get('dingtalk', {code}, loading)
+  return get('dingtalk', { code }, loading)
 }
 
 const getDingOauth2Callback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
   code,
-  loading
+  loading,
 ) => {
-  return get('dingtalk/oauth2', {code}, loading)
+  return get('dingtalk/oauth2', { code }, loading)
 }
 
 const getWecomCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
   code,
-  loading
+  loading,
 ) => {
-  return get('wecom', {code}, loading)
+  return get('wecom', { code }, loading)
 }
 const getLarkCallback: (code: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
   code,
-  loading
+  loading,
 ) => {
-  return get('lark/oauth2', {code}, loading)
+  return get('lark/oauth2', { code }, loading)
 }
 
 /**
  * 获取认证设置
  */
-const getAuthSetting: (auth_type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (auth_type, loading) => {
+const getAuthSetting: (auth_type: string, loading?: Ref<boolean>) => Promise<Result<any>> = (
+  auth_type,
+  loading,
+) => {
   return get(`/chat_user/${auth_type}/detail`, undefined, loading)
 }
 export default {
@@ -160,5 +160,5 @@ export default {
   getLarkCallback,
   getQrSource,
   ldapLogin,
-  getAuthSetting
+  getAuthSetting,
 }

ui/src/request/chat/index.ts

@@ -53,19 +53,6 @@ instance.interceptors.response.use(
       MsgError(err.message)
       console.error(err)
     }
-    if (err.response?.status === 401) {
-      const { chatUser } = useStore()
-      if (chatUser.accessToken) {
-        router.push({ name: 'login', params: { accessToken: chatUser.accessToken } })
-      } else {
-        router.push('/404 ')
-      }
-    }
-    if (err.response?.status === 403 && !err.response.config.url.includes('chat/open')) {
-      MsgError(
-        err.response.data && err.response.data.message ? err.response.data.message : '没有权限访问',
-      )
-    }
     return Promise.reject(err)
   },
 )

ui/src/router/chat/index.ts

@@ -33,7 +33,15 @@ router.beforeEach(
       })
       return
     }
-    const authentication = await chatUser.isAuthentication()
+    let authentication = false
+    try {
+      authentication = await chatUser.isAuthentication()
+    } catch (e: any) {
+      next({
+        path: '/404',
+      })
+      return
+    }
     const token = chatUser.getToken()
     if (authentication) {
       if (!token && to.name != 'login') {
@@ -45,22 +53,46 @@ router.beforeEach(
         })
         return
       } else {
-        next()
+        if (to.name == 'login') {
-        return
+          next()
+          return
+        } else {
+          try {
+            await chatUser.applicationProfile()
+          } catch (e: any) {
+            if (e.response?.status === 401) {
+              next({
+                name: 'login',
+                params: {
+                  accessToken: to.params.accessToken,
+                },
+              })
+            }
+            return
+          }
+          next()
+          return
+        }
       }
     } else {
       await chatUser.anonymousAuthentication()
     }
     if (!chatUser.application) {
-      await chatUser.applicationProfile()
+      try {
-    }
+        await chatUser.applicationProfile()
-    // 判断是否有菜单权限
+      } catch (e: any) {
-    if (to.meta.permission ? hasPermission(to.meta.permission as any, 'OR') : true) {
+        if (e.response?.status === 401) {
-      next()
+          next({
-    } else {
+            name: 'login',
-      // 如果没有权限则直接取404页面
+            params: {
-      next('404')
+              accessToken: to.params.accessToken,
+            },
+          })
+        }
+        return
+      }
     }
+    next()
   },
 )
 router.afterEach(() => {

ui/src/stores/modules/chat-user.ts

@@ -1,7 +1,8 @@
 import { defineStore } from 'pinia'
 import ChatAPI from '@/api/chat/chat'
 import { type ChatProfile } from '@/api/type/chat'
-
+import type { LoginRequest } from '@/api/type/user'
+import type { Ref } from 'vue'
 interface ChatUser {
   // 用户id
   id: string
@@ -59,12 +60,29 @@ const useChatUserStore = defineStore('chat-user', {
       }
       return localStorage.getItem(`accessToken`)
     },
+    setToken(token: string) {
+      this.token = token
+      sessionStorage.setItem(`${this.accessToken}-accessToken`, token)
+      localStorage.setItem(`${this.accessToken}-accessToken`, token)
+    },
     /**
      *匿名认证
      */
     anonymousAuthentication() {
       return ChatAPI.anonymousAuthentication(this.accessToken as string).then((ok) => {
-        this.token = ok.data
+        this.setToken(ok.data)
+        return this.token
+      })
+    },
+    login(request: LoginRequest, loading?: Ref<boolean>) {
+      return ChatAPI.login(this.accessToken as string, request, loading).then((ok) => {
+        this.setToken(ok.data.token)
+        return this.token
+      })
+    },
+    ldapLogin(request: LoginRequest, loading?: Ref<boolean>) {
+      return ChatAPI.ldapLogin(this.accessToken as string, request, loading).then((ok) => {
+        this.setToken(ok.data.token)
         return this.token
       })
     },

ui/src/views/chat/user-login/index.vue

@@ -2,7 +2,8 @@
   <UserLoginLayout v-if="!loading" v-loading="loading">
     <LoginContainer :subTitle="theme.themeInfo?.slogan || $t('theme.defaultSlogan')">
       <h2 class="mb-24" v-if="!showQrCodeTab">
-        {{ loginMode == 'LOCAL' ? $t('views.login.title') : loginMode }}</h2>
+        {{ loginMode == 'LOCAL' ? $t('views.login.title') : loginMode }}
+      </h2>
       <div v-if="!showQrCodeTab">
         <el-form
           class="login-form"
@@ -80,7 +81,7 @@
         </div>
       </div>
       <div v-if="showQrCodeTab">
-        <QrCodeTab :tabs="orgOptions"/>
+        <QrCodeTab :tabs="orgOptions" />
       </div>
       <div class="login-gradient-divider lighter mt-24" v-if="modeList.length > 1">
         <span>{{ $t('views.login.moreMethod') }}</span>
@@ -99,7 +100,7 @@
                 'font-size': item === 'OAUTH2' ? '8px' : '10px',
                 color: user.themeInfo?.theme,
               }"
-            >{{ item }}</span
+              >{{ item }}</span
             >
           </el-button>
           <el-button
@@ -109,7 +110,7 @@
             class="login-button-circle color-secondary"
             @click="changeMode('QR_CODE')"
           >
-            <img src="@/assets/scan/icon_qr_outlined.svg" width="25px"/>
+            <img src="@/assets/scan/icon_qr_outlined.svg" width="25px" />
           </el-button>
           <el-button
             v-if="item === 'LOCAL' && loginMode != 'LOCAL'"
@@ -126,30 +127,28 @@
   </UserLoginLayout>
 </template>
 <script setup lang="ts">
-import {onMounted, ref, onBeforeMount} from 'vue'
+import { onMounted, ref, onBeforeMount } from 'vue'
-import {useRoute, useRouter} from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
-import type {FormInstance, FormRules} from 'element-plus'
+import type { FormInstance, FormRules } from 'element-plus'
-import type {LoginRequest} from '@/api/type/login'
+import type { LoginRequest } from '@/api/type/login'
 import LoginContainer from '@/layout/login-layout/LoginContainer.vue'
 import UserLoginLayout from '@/layout/login-layout/UserLoginLayout.vue'
 import loginApi from '@/api/chat/chat.ts'
-import {t, getBrowserLang} from '@/locales'
+import { t, getBrowserLang } from '@/locales'
 import useStore from '@/stores'
-import {useI18n} from 'vue-i18n'
+import { useI18n } from 'vue-i18n'
 import QrCodeTab from '@/views/login/scanCompinents/QrCodeTab.vue'
-import {MsgConfirm, MsgError} from '@/utils/message.ts'
+import { MsgConfirm, MsgError } from '@/utils/message.ts'
-import useUserStore from "@/stores/modules/user.ts";
+import useUserStore from '@/stores/modules/user.ts'
-// import * as dd from 'dingtalk-jsapi'
-// import {loadScript} from '@/utils/utils'
 
 const router = useRouter()
-const {login, user, theme, chatUser} = useStore()
+const { login, user, theme, chatUser } = useStore()
-const {locale} = useI18n({useScope: 'global'})
+const { locale } = useI18n({ useScope: 'global' })
 const loading = ref<boolean>(false)
 const route = useRoute()
 const identifyCode = ref<string>('')
 const {
-  params: {accessToken}
+  params: { accessToken },
 } = route as any
 const loginFormRef = ref<FormInstance>()
 const loginForm = ref<LoginRequest>({
@@ -185,16 +184,12 @@ const rules = ref<FormRules<LoginRequest>>({
 const loginHandle = () => {
   loginFormRef.value?.validate().then(() => {
     if (loginMode.value === 'LDAP') {
-      loginApi.ldapLogin(accessToken, loginForm.value,).then((ok) => {
+      chatUser.ldapLogin(loginForm.value).then((ok) => {
-        localStorage.setItem('token', ok?.data?.token)
+        router.push({ name: 'chat', params: { accessToken: chatUser.accessToken } })
-        const user = useUserStore()
-        return user.profile(loading)
       })
     } else {
-      loginApi.login(accessToken, loginForm.value,).then((ok) => {
+      chatUser.login(loginForm.value).then((ok) => {
-        localStorage.setItem('token', ok?.data?.token)
+        router.push({ name: 'chat', params: { accessToken: chatUser.accessToken } })
-        const user = useUserStore()
-        return user.profile(loading)
       })
     }
   })
@@ -236,31 +231,32 @@ function redirectAuth(authType: string, needMessage: boolean = false) {
   }
   loginApi.getAuthSetting(authType, loading).then((res: any) => {
     if (!res.data || !res.data.config) {
-      return;
+      return
     }
 
-    const config = res.data.config;
+    const config = res.data.config
-    const redirectUrl = eval(`\`${config.redirectUrl}/${accessToken}\``);
+    const redirectUrl = eval(`\`${config.redirectUrl}/${accessToken}\``)
-    let url;
+    let url
     if (authType === 'CAS') {
-      url = config.ldpUri;
+      url = config.ldpUri
-      url += url.indexOf('?') !== -1
+      url +=
-        ? `&service=${encodeURIComponent(redirectUrl)}`
+        url.indexOf('?') !== -1
-        : `?service=${encodeURIComponent(redirectUrl)}`;
+          ? `&service=${encodeURIComponent(redirectUrl)}`
+          : `?service=${encodeURIComponent(redirectUrl)}`
     } else if (authType === 'OIDC') {
-      const scope = config.scope || 'openid+profile+email';
+      const scope = config.scope || 'openid+profile+email'
-      url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`;
+      url = `${config.authEndpoint}?client_id=${config.clientId}&redirect_uri=${redirectUrl}&response_type=code&scope=${scope}`
       if (config.state) {
-        url += `&state=${config.state}`;
+        url += `&state=${config.state}`
       }
     } else if (authType === 'OAuth2') {
-      url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${uuidv4()}`;
+      url = `${config.authEndpoint}?client_id=${config.clientId}&response_type=code&redirect_uri=${redirectUrl}&state=${uuidv4()}`
       if (config.scope) {
-        url += `&scope=${config.scope}`;
+        url += `&scope=${config.scope}`
       }
     }
     if (!url) {
-      return;
+      return
     }
     if (needMessage) {
       MsgConfirm(t('views.login.jump_tip'), '', {
@@ -269,15 +265,14 @@ function redirectAuth(authType: string, needMessage: boolean = false) {
         confirmButtonClass: '',
       })
         .then(() => {
-          window.location.href = url;
+          window.location.href = url
         })
-        .catch(() => {
+        .catch(() => {})
-        });
     } else {
-      console.log('url', url);
+      console.log('url', url)
-      window.location.href = url;
+      window.location.href = url
     }
-  });
+  })
 }
 
 function changeMode(val: string) {
@@ -305,105 +300,7 @@ onBeforeMount(() => {
       redirectAuth(modeList.value[0])
     }
   }
-  // user
-  //   .getQrType()
-  //   .then((res) => {
-  //     if (res.length > 0) {
-  //       modeList.value = ['QR_CODE', ...modeList.value]
-  //       QrList.value = res
-  //       QrList.value.forEach((item) => {
-  //         orgOptions.value.push({
-  //           key: item,
-  //           value:
-  //             item === 'wecom'
-  //               ? t('views.system.authentication.scanTheQRCode.wecom')
-  //               : item === 'dingtalk'
-  //                 ? t('views.system.authentication.scanTheQRCode.dingtalk')
-  //                 : t('views.system.authentication.scanTheQRCode.lark'),
-  //         })
-  //       })
-  //     }
-  //   })
-  //   .finally(() => (loading.value = false))
 })
-//declare const window: any
-
-// onMounted(() => {
-//   makeCode()
-//   const route = useRoute()
-//   const currentUrl = ref(route.fullPath)
-//   const params = new URLSearchParams(currentUrl.value.split('?')[1])
-//   const client = params.get('client')
-//
-//   const handleDingTalk = () => {
-//     const code = params.get('corpId')
-//     if (code) {
-//       dd.runtime.permission.requestAuthCode({corpId: code}).then((res) => {
-//         console.log('DingTalk client request success:', res)
-//         user.dingOauth2Callback(res.code).then(() => {
-//           router.push({name: 'home'})
-//         })
-//       })
-//     }
-//   }
-//
-//   const handleLark = () => {
-//     const appId = params.get('appId')
-//     const callRequestAuthCode = () => {
-//       window.tt?.requestAuthCode({
-//         appId: appId,
-//         success: (res: any) => {
-//           user.larkCallback(res.code).then(() => {
-//             router.push({name: 'home'})
-//           })
-//         },
-//         fail: (error: any) => {
-//           MsgError(error)
-//         },
-//       })
-//     }
-//
-//     loadScript('https://lf-scm-cn.feishucdn.com/lark/op/h5-js-sdk-1.5.35.js', {
-//       jsId: 'lark-sdk',
-//       forceReload: true,
-//     })
-//       .then(() => {
-//         if (window.tt) {
-//           window.tt.requestAccess({
-//             appID: appId,
-//             scopeList: [],
-//             success: (res: any) => {
-//               user.larkCallback(res.code).then(() => {
-//                 router.push({name: 'home'})
-//               })
-//             },
-//             fail: (error: any) => {
-//               const {errno} = error
-//               if (errno === 103) {
-//                 callRequestAuthCode()
-//               }
-//             },
-//           })
-//         } else {
-//           callRequestAuthCode()
-//         }
-//       })
-//       .catch((error) => {
-//         console.error('SDK 加载失败:', error)
-//       })
-//   }
-//
-//   switch (client) {
-//     case 'dingtalk':
-//       handleDingTalk()
-//       break
-//     case 'lark':
-//       handleLark()
-//       break
-//     default:
-//       break
-//   }
-// })
 </script>
 <style lang="scss" scoped>
 .login-gradient-divider {