vben
authored
|
1
2
3
4
5
|
<template>
<PageWrapper
title="登录过期示例"
content="用户登录过期示例,不再跳转登录页,直接生成页面覆盖当前页面,方便保持过期前的用户状态!"
>
|
|
6
7
8
9
10
11
12
13
14
|
<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>
|
vben
authored
|
15
16
17
18
19
|
</PageWrapper>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { PageWrapper } from '/@/components/Page';
|
vben
authored
|
20
|
import { useUserStore } from '/@/store/modules/user';
|
vben
authored
|
21
|
|
|
22
23
|
import { sessionTimeoutApi, tokenExpiredApi } from '/@/api/demo/account';
import { Card } from 'ant-design-vue';
|
vben
authored
|
24
25
26
|
export default defineComponent({
name: 'TestSessionTimeout',
|
|
27
|
components: { ACardGrid: Card.Grid, ACard: Card, PageWrapper },
|
vben
authored
|
28
|
setup() {
|
vben
authored
|
29
|
const userStore = useUserStore();
|
|
30
31
|
async function test1() {
// 示例网站生产环境用的是mock数据,不能返回Http状态码,
|
vben
authored
|
32
33
34
35
36
|
// 所以在生产环境直接改变状态来达到测试效果
if (import.meta.env.PROD) {
userStore.setToken(undefined);
userStore.setSessionTimeout(true);
} else {
|
|
37
|
// 这个api会返回状态码为401的响应
|
vben
authored
|
38
39
|
await sessionTimeoutApi();
}
|
vben
authored
|
40
|
}
|
|
41
42
43
44
45
46
47
48
49
50
51
|
async function test2() {
// 这个api会返回code为401的json数据,Http状态码为200
try {
await tokenExpiredApi();
} catch (err) {
console.log('接口访问错误:', (err as Error).message || '错误');
}
}
return { test1, test2 };
|
vben
authored
|
52
53
54
|
},
});
</script>
|