From 6544f84bc24b69ff3801cf77cbb4ade69f72d087 Mon Sep 17 00:00:00 2001
From: 无木 <netfan@foxmail.com>
Date: 星期二, 14 九月 2021 22:11:21 +0800
Subject: [PATCH] feat(demo): add token expired example
---
src/utils/http/axios/index.ts | 4 ++++
src/api/demo/account.ts | 3 +++
src/views/demo/feat/session-timeout/index.vue | 32 ++++++++++++++++++++++++++------
mock/demo/account.ts | 9 +++++++++
4 files changed, 42 insertions(+), 6 deletions(-)
diff --git a/mock/demo/account.ts b/mock/demo/account.ts
index 4ba247d..a392493 100644
--- a/mock/demo/account.ts
+++ b/mock/demo/account.ts
@@ -1,5 +1,6 @@
import { MockMethod } from 'vite-plugin-mock';
import { resultSuccess, resultError } from '../_util';
+import { ResultEnum } from '../../src/enums/httpEnum';
const userInfo = {
name: 'Vben',
@@ -59,4 +60,12 @@
return resultError();
},
},
+ {
+ url: '/basic-api/user/tokenExpired',
+ method: 'post',
+ statusCode: 200,
+ response: () => {
+ return resultError('Token Expired!', { code: ResultEnum.TIMEOUT as number });
+ },
+ },
] as MockMethod[];
diff --git a/src/api/demo/account.ts b/src/api/demo/account.ts
index 53537d1..2a36813 100644
--- a/src/api/demo/account.ts
+++ b/src/api/demo/account.ts
@@ -4,6 +4,7 @@
enum Api {
ACCOUNT_INFO = '/account/getAccountInfo',
SESSION_TIMEOUT = '/user/sessionTimeout',
+ TOKEN_EXPIRED = '/user/tokenExpired',
}
// Get personal center-basic settings
@@ -11,3 +12,5 @@
export const accountInfoApi = () => defHttp.get<GetAccountInfoModel>({ url: Api.ACCOUNT_INFO });
export const sessionTimeoutApi = () => defHttp.post<void>({ url: Api.SESSION_TIMEOUT });
+
+export const tokenExpiredApi = () => defHttp.post<void>({ url: Api.TOKEN_EXPIRED });
diff --git a/src/utils/http/axios/index.ts b/src/utils/http/axios/index.ts
index 1108f55..1e946dc 100644
--- a/src/utils/http/axios/index.ts
+++ b/src/utils/http/axios/index.ts
@@ -15,6 +15,7 @@
import { useErrorLogStoreWithOut } from '/@/store/modules/errorLog';
import { useI18n } from '/@/hooks/web/useI18n';
import { joinTimestamp, formatRequestDate } from './helper';
+import { useUserStoreWithOut } from '/@/store/modules/user';
const globSetting = useGlobSetting();
const urlPrefix = globSetting.urlPrefix;
@@ -61,6 +62,9 @@
switch (code) {
case ResultEnum.TIMEOUT:
timeoutMsg = t('sys.api.timeoutMessage');
+ const userStore = useUserStoreWithOut();
+ userStore.setToken(undefined);
+ userStore.logout(true);
break;
default:
if (message) {
diff --git a/src/views/demo/feat/session-timeout/index.vue b/src/views/demo/feat/session-timeout/index.vue
index 8405752..2a0c328 100644
--- a/src/views/demo/feat/session-timeout/index.vue
+++ b/src/views/demo/feat/session-timeout/index.vue
@@ -3,7 +3,15 @@
title="鐧诲綍杩囨湡绀轰緥"
content="鐢ㄦ埛鐧诲綍杩囨湡绀轰緥锛屼笉鍐嶈烦杞櫥褰曢〉锛岀洿鎺ョ敓鎴愰〉闈㈣鐩栧綋鍓嶉〉闈紝鏂逛究淇濇寔杩囨湡鍓嶇殑鐢ㄦ埛鐘舵�侊紒"
>
- <a-button type="primary" @click="test">鐐瑰嚮瑙﹀彂鐢ㄦ埛鐧诲綍杩囨湡</a-button>
+ <a-card title="璇风偣鍑讳笅闈㈢殑鎸夐挳璁块棶娴嬭瘯鎺ュ彛" extra="鎵�璁块棶鐨勬帴鍙ｄ細杩斿洖Token杩囨湡鍝嶅簲">
+ <a-card-grid style="width: 50%; text-align: center">
+ <a-button type="primary" @click="test1">HttpStatus == 401</a-button>
+ </a-card-grid>
+ <a-card-grid style="width: 50%; text-align: center">
+ <span></span>
+ <a-button class="ml-4" type="primary" @click="test2">Response.code == 401</a-button>
+ </a-card-grid>
+ </a-card>
</PageWrapper>
</template>
<script lang="ts">
@@ -11,24 +19,36 @@
import { PageWrapper } from '/@/components/Page';
import { useUserStore } from '/@/store/modules/user';
- import { sessionTimeoutApi } from '/@/api/demo/account';
+ import { sessionTimeoutApi, tokenExpiredApi } from '/@/api/demo/account';
+ import { Card } from 'ant-design-vue';
export default defineComponent({
name: 'TestSessionTimeout',
- components: { PageWrapper },
+ components: { ACardGrid: Card.Grid, ACard: Card, PageWrapper },
setup() {
const userStore = useUserStore();
- async function test() {
- // 绀轰緥缃戠珯鐢熶骇鐜鐢ㄥ緱鏄痬ock鏁版嵁锛屾墍浠ヤ笉鑳借繑鍥�401锛�
+ async function test1() {
+ // 绀轰緥缃戠珯鐢熶骇鐜鐢ㄧ殑鏄痬ock鏁版嵁锛屼笉鑳借繑鍥濰ttp鐘舵�佺爜锛�
// 鎵�浠ュ湪鐢熶骇鐜鐩存帴鏀瑰彉鐘舵�佹潵杈惧埌娴嬭瘯鏁堟灉
if (import.meta.env.PROD) {
userStore.setToken(undefined);
userStore.setSessionTimeout(true);
} else {
+ // 杩欎釜api浼氳繑鍥炵姸鎬佺爜涓�401鐨勫搷搴�
await sessionTimeoutApi();
}
}
- return { test };
+
+ async function test2() {
+ // 杩欎釜api浼氳繑鍥瀋ode涓�401鐨刯son鏁版嵁锛孒ttp鐘舵�佺爜涓�200
+ try {
+ await tokenExpiredApi();
+ } catch (err) {
+ console.log('鎺ュ彛璁块棶閿欒锛�', (err as Error).message || '閿欒');
+ }
+ }
+
+ return { test1, test2 };
},
});
</script>
--
Gitblit v1.8.0