[Core] Add 503 page

.github/workflows/bofore_checker.yml

@@ -14,10 +14,24 @@ jobs:
         uses: actions/checkout@v3
       - run: echo 'Before checker loading'
 
-  before_checker_style:
+  before_checker_ui:
     runs-on: ubuntu-latest
     needs:
       - before_checker_loading
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v3
+      - name: Set Node.js 18.x
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.x
+      - run: cd core/datacap-ui
+      - run: npm install && npm run build
+
+  before_checker_style:
+    runs-on: ubuntu-latest
+    needs:
+      - before_checker_ui
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -32,7 +46,7 @@ jobs:
   before_checker_bugs:
     runs-on: ubuntu-latest
     needs:
-      - before_checker_style
+      - before_checker_ui
     steps:
       - name: Checkout
         uses: actions/checkout@v3
@@ -44,27 +58,11 @@ jobs:
       - run: chmod 755 ./mvnw
       - run: ./mvnw clean install findbugs:findbugs -Dcheckstyle.skip -Dgpg.skip -Dskip.yarn -DskipTests=true
 
-  before_checker_ui:
-    runs-on: ubuntu-latest
-    needs:
-      - before_checker_bugs
-    steps:
-      - name: Checkout
-        uses: actions/checkout@v3
-      - name: Set Node.js 18.x
-        uses: actions/setup-node@v3
-        with:
-          node-version: 18.x
-      - run: cd core/datacap-ui
-      - run: npm install && npm run build
-
   before_checker_package:
     runs-on: ubuntu-latest
     needs:
-      - before_checker_loading
       - before_checker_style
       - before_checker_bugs
-      - before_checker_ui
     steps:
       - name: Checkout
         uses: actions/checkout@v3

core/datacap-ui/src/i18n/langs/en/common.ts

@@ -1,7 +1,10 @@
 export default {
     pageNotFound: 'Oops! Page Not Found!',
     pageNotFoundTip: 'It seems like the page you\'re looking for, does not exist or might have been removed.',
+    pageNotAuthorized: 'Oops! Page Not Authorized!',
+    pageNotAuthorizedTip: 'Sorry, you don\'t have permission to access this page.',
     backToHome: 'Back to Home',
+    backToSignin: 'Back to Sign In',
     profile: 'Profile',
     home: 'Home',
     dashboard: 'Dashboard',

core/datacap-ui/src/i18n/langs/zhCn/common.ts

@@ -1,7 +1,10 @@
 export default {
     pageNotFound: '哎呀！页面未找到！',
     pageNotFoundTip: '您要查找的页面，似乎不存在或可能已被删除。',
+    pageNotAuthorized: '哎呀！页面未授权！',
+    pageNotAuthorizedTip: '抱歉，您没有权限访问该页面。',
     backToHome: '返回首页',
+    backToSignin: '返回登录',
     profile: '个人中心',
     home: '首页',
     dashboard: '仪表盘',

core/datacap-ui/src/router/http.ts

@@ -9,6 +9,11 @@ const createHttpRoute = (router: Router) => {
                 name: '404',
                 path: '404',
                 component: () => import('@/views/common/error/NotFound.vue')
+            },
+            {
+                name: '403',
+                path: '403',
+                component: () => import('@/views/common/error/NotAuthorized.vue')
             }
         ]
     })

core/datacap-ui/src/router/index.ts

@@ -14,7 +14,6 @@ createHttpRoute(router)
 createAuthRoute(router)
 createDefaultRouter(router)
 
-
 router.beforeEach((to, _from, next) => {
     if (to.matched.length === 0) {
         next('/common/404')

core/datacap-ui/src/utils/http.ts

@@ -54,7 +54,7 @@ export class HttpUtils
         // If the authorization key does not match, clear the local token reload page
         if (response.code === 4003) {
             this.handlerMessage(response.message)
-            router.push('/common/not_authorized')
+            router.push('/common/403')
         }
         if (response.code === 5000) {
             this.handlerMessage(response.message)

core/datacap-ui/src/views/common/error/NotAuthorized.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class='h-svh'>
+    <div class='m-auto flex h-full w-full flex-col items-center justify-center gap-2'>
+      <h1 class='text-[7rem] font-bold leading-tight'>503</h1>
+      <span class='font-medium'>{{ $t('common.pageNotAuthorized') }}</span>
+      <p class='text-center text-muted-foreground mt-6'>{{ $t('common.pageNotAuthorizedTip') }}</p>
+      <div class='mt-6 flex gap-4'>
+        <RouterLink to="/">
+          <Button variant='outline'>{{ $t('common.backToHome') }}</Button>
+        </RouterLink>
+        <RouterLink to="/auth/signin">
+          <Button variant='outline'>{{ $t('common.backToSignin') }}</Button>
+        </RouterLink>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { Button } from '@/components/ui/button'
+
+export default defineComponent({
+  name: 'NotAuthorized',
+  components: {Button}
+})
+</script>