fix: Page optimization when the application is unavailable (#3580)

Author: shaohuzhang1

apps/chat/serializers/chat_authentication.py

@@ -57,6 +57,8 @@ def profile(self):
         self.is_valid(raise_exception=True)
         access_token = self.data.get("access_token")
         application_access_token = QuerySet(ApplicationAccessToken).filter(access_token=access_token).first()
+        if application_access_token is None:
+            raise NotFound404(404, _("Invalid access_token"))
         application_id = application_access_token.application_id
         profile = {
             'authentication': False

ui/src/router/chat/index.ts

@@ -37,9 +37,7 @@ router.beforeEach(
     try {
       authentication = await chatUser.isAuthentication()
     } catch (e: any) {
-      next({
-        path: '/404',
-      })
+      next()
       return
     }
     const p_token = to.query.token
@@ -86,7 +84,12 @@ router.beforeEach(
         }
       }
     } else {
-      await chatUser.anonymousAuthentication()
+      try {
+        await chatUser.anonymousAuthentication()
+      } catch (e: any) {
+        next()
+        return
+      }
     }
     if (!chatUser.application) {
       try {

ui/src/views/chat/index.vue

@@ -25,11 +25,16 @@ const {
 
 const currentTemplate = computed(() => {
   let modeName = ''
-  if (!mode || mode === 'pc') {
-    modeName = common.isMobile() ? 'mobile' : 'pc'
+  if (chatUser.application) {
+    if (!mode || mode === 'pc') {
+      modeName = common.isMobile() ? 'mobile' : 'pc'
+    } else {
+      modeName = mode
+    }
   } else {
-    modeName = mode
+    modeName = 'no-service'
   }
+
   const name = `/src/views/chat/${modeName}/index.vue`
   return components[name].default
 })

ui/src/views/chat/no-service/index.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="not-found-container flex-center">
+    <div>
+      <img src="@/assets/500.png" width="250" alt="" />
+      <h4 class="text-center">{{ $t('common.notFound.NoService') }}</h4>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+<style lang="scss" scoped>
+.not-found-container {
+  height: 100vh;
+  width: 100vw;
+}
+</style>