mock/demo/account.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/api/demo/account.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/utils/http/axios/index.ts | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 | |
src/views/demo/feat/session-timeout/index.vue | ●●●●● 补丁 | 查看 | 原始文档 | blame | 历史 |
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[]; 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 }); 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) { 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() { // 示例网站生产环境用得是mock数据,所以不能返回401, async function test1() { // 示例网站生产环境用的是mock数据,不能返回Http状态码, // 所以在生产环境直接改变状态来达到测试效果 if (import.meta.env.PROD) { userStore.setToken(undefined); userStore.setSessionTimeout(true); } else { // 这个api会返回状态码为401的响应 await sessionTimeoutApi(); } } return { test }; async function test2() { // 这个api会返回code为401的json数据,Http状态码为200 try { await tokenExpiredApi(); } catch (err) { console.log('接口访问错误:', (err as Error).message || '错误'); } } return { test1, test2 }; }, }); </script>