feat(projects): add function page: request

src/locales/langs/en-us.ts

@@ -19,7 +19,16 @@ const local: App.I18n.Schema = {
     lookForward: 'Coming soon',
     userCenter: 'User Center',
     logout: 'Logout',
-    logoutConfirm: 'Are you sure you want to log out?'
+    logoutConfirm: 'Are you sure you want to log out?',
+    trigger: 'Trigger'
+  },
+  request: {
+    logout: 'Logout user after request failed',
+    logoutMsg: 'User status is invalid, please log in again',
+    logoutWithModal: 'Pop up modal after request failed and then log out user',
+    logoutWithModalMsg: 'User status is invalid, please log in again',
+    refreshToken: 'The requested token has expired, refresh the token',
+    tokenExpired: 'The requested token has expired'
   },
   theme: {
     themeSchema: {
@@ -118,6 +127,7 @@ const local: App.I18n.Schema = {
     'function_hide-child_one': 'Hide Child',
     'function_hide-child_two': 'Two',
     'function_hide-child_three': 'Three',
+    function_request: 'Request',
     manage: 'System Manage',
     manage_user: 'User Manage',
     'manage_user-detail': 'User Detail',

src/locales/langs/zh-cn.ts

@@ -19,7 +19,16 @@ const local: App.I18n.Schema = {
     lookForward: '敬请期待',
     userCenter: '个人中心',
     logout: '退出登录',
-    logoutConfirm: '确认退出登录吗？'
+    logoutConfirm: '确认退出登录吗？',
+    trigger: '触发'
+  },
+  request: {
+    logout: '请求失败后登出用户',
+    logoutMsg: '用户状态失效，请重新登录',
+    logoutWithModal: '请求失败后弹出模态框再登出用户',
+    logoutWithModalMsg: '用户状态失效，请重新登录',
+    refreshToken: '请求的token已过期，刷新token',
+    tokenExpired: 'token已过期'
   },
   theme: {
     themeSchema: {
@@ -118,6 +127,7 @@ const local: App.I18n.Schema = {
     'function_hide-child_one': '隐藏子菜单',
     'function_hide-child_two': '菜单二',
     'function_hide-child_three': '菜单三',
+    function_request: '请求',
     manage: '系统管理',
     manage_user: '用户管理',
     'manage_user-detail': '用户详情',

src/router/elegant/imports.ts

@@ -24,6 +24,7 @@ export const views: Record<LastLevelRouteKey, RouteComponent | (() => Promise<Ro
   "function_hide-child_three": () => import("@/views/function/hide-child/three/index.vue"),
   "function_hide-child_two": () => import("@/views/function/hide-child/two/index.vue"),
   "function_multi-tab": () => import("@/views/function/multi-tab/index.vue"),
+  function_request: () => import("@/views/function/request/index.vue"),
   function_tab: () => import("@/views/function/tab/index.vue"),
   home: () => import("@/views/home/index.vue"),
   manage_role: () => import("@/views/manage/role/index.vue"),

src/router/elegant/routes.ts

@@ -117,6 +117,15 @@ export const generatedRoutes: GeneratedRoute[] = [
           activeMenu: 'function_tab'
         }
       },
+      {
+        name: 'function_request',
+        path: '/function/request',
+        component: 'view.function_request',
+        meta: {
+          title: 'function_request',
+          i18nKey: 'route.function_request'
+        }
+      },
       {
         name: 'function_tab',
         path: '/function/tab',

src/router/elegant/transform.ts

@@ -157,6 +157,7 @@ const routeMap: RouteMap = {
   "function_hide-child_three": "/function/hide-child/three",
   "function_hide-child_two": "/function/hide-child/two",
   "function_multi-tab": "/function/multi-tab",
+  "function_request": "/function/request",
   "function_tab": "/function/tab",
   "home": "/home",
   "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?",

src/service/api/auth.ts

@@ -37,13 +37,12 @@ export function fetchRefreshToken(refreshToken: string) {
   });
 }
 
-export function fetchDebug() {
-  return request<string>({
-    url: '/debug-post',
-    method: 'post',
-    headers: { 'content-type': 'application/x-www-form-urlencoded' },
-    data: {
-      a: '1'
-    }
-  });
+/**
+ * return custom backend error
+ *
+ * @param code error code
+ * @param msg error message
+ */
+export function fetchCustomBackendError(code: string, msg: string) {
+  return request({ url: '/auth/error', params: { code, msg } });
 }

src/typings/app.d.ts

@@ -264,6 +264,15 @@ declare namespace App {
         userCenter: string;
         logout: string;
         logoutConfirm: string;
+        trigger: string;
+      };
+      request: {
+        logout: string;
+        logoutMsg: string;
+        logoutWithModal: string;
+        logoutWithModalMsg: string;
+        refreshToken: string;
+        tokenExpired: string;
       };
       theme: {
         themeSchema: { title: string } & Record<UnionKey.ThemeScheme, string>;

src/typings/elegant-router.d.ts

@@ -31,6 +31,7 @@ declare module "@elegant-router/types" {
     "function_hide-child_three": "/function/hide-child/three";
     "function_hide-child_two": "/function/hide-child/two";
     "function_multi-tab": "/function/multi-tab";
+    "function_request": "/function/request";
     "function_tab": "/function/tab";
     "home": "/home";
     "login": "/login/:module(pwd-login|code-login|register|reset-pwd|bind-wechat)?";
@@ -117,6 +118,7 @@ declare module "@elegant-router/types" {
     | "function_hide-child_three"
     | "function_hide-child_two"
     | "function_multi-tab"
+    | "function_request"
     | "function_tab"
     | "home"
     | "manage_role"

src/views/function/request/index.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { $t } from '@/locales';
+import { fetchCustomBackendError } from '@/service/api';
+
+async function logout() {
+  await fetchCustomBackendError('8888', $t('request.logoutMsg'));
+}
+
+async function logoutWithModal() {
+  await fetchCustomBackendError('7777', $t('request.logoutWithModalMsg'));
+}
+
+async function refreshToken() {
+  await fetchCustomBackendError('9999', $t('request.tokenExpired'));
+}
+</script>
+
+<template>
+  <ASpace direction="vertical" :size="16">
+    <ACard :title="$t('request.logout')" :bordered="false" size="small" class="card-wrapper">
+      <AButton @click="logout">{{ $t('common.trigger') }}</AButton>
+    </ACard>
+    <ACard :title="$t('request.logoutWithModal')" :bordered="false" size="small" class="card-wrapper">
+      <AButton @click="logoutWithModal">{{ $t('common.trigger') }}</AButton>
+    </ACard>
+    <ACard :title="$t('request.refreshToken')" :bordered="false" size="small" class="card-wrapper">
+      <AButton @click="refreshToken">{{ $t('common.trigger') }}</AButton>
+    </ACard>
+  </ASpace>
+</template>
+
+<style scoped></style>