Skip to content
项目
群组
代码片段
帮助
当前项目
正在载入...
登录 / 注册
切换导航面板
B
basic-vue-admin
概览
概览
详情
活动
周期分析
版本库
存储库
文件
提交
分支
标签
贡献者
分支图
比较
统计图
问题
0
议题
0
列表
看板
标记
里程碑
合并请求
0
合并请求
0
CI / CD
CI / CD
流水线
作业
日程表
图表
维基
Wiki
代码片段
代码片段
成员
成员
折叠边栏
关闭边栏
活动
图像
聊天
创建新问题
作业
提交
问题看板
Open sidebar
Basic
basic-vue-admin
Commits
6544f84b
提交
6544f84b
authored
9月 14, 2021
作者:
无木
浏览文件
操作
浏览文件
下载
电子邮件补丁
差异文件
feat(demo): add token expired example
添加token超时例子
上级
2aa5e5da
隐藏空白字符变更
内嵌
并排
正在显示
4 个修改的文件
包含
42 行增加
和
6 行删除
+42
-6
account.ts
mock/demo/account.ts
+9
-0
account.ts
src/api/demo/account.ts
+3
-0
index.ts
src/utils/http/axios/index.ts
+4
-0
index.vue
src/views/demo/feat/session-timeout/index.vue
+26
-6
没有找到文件。
mock/demo/account.ts
浏览文件 @
6544f84b
import
{
MockMethod
}
from
'vite-plugin-mock'
;
import
{
MockMethod
}
from
'vite-plugin-mock'
;
import
{
resultSuccess
,
resultError
}
from
'../_util'
;
import
{
resultSuccess
,
resultError
}
from
'../_util'
;
import
{
ResultEnum
}
from
'../../src/enums/httpEnum'
;
const
userInfo
=
{
const
userInfo
=
{
name
:
'Vben'
,
name
:
'Vben'
,
...
@@ -59,4 +60,12 @@ export default [
...
@@ -59,4 +60,12 @@ export default [
return
resultError
();
return
resultError
();
},
},
},
},
{
url
:
'/basic-api/user/tokenExpired'
,
method
:
'post'
,
statusCode
:
200
,
response
:
()
=>
{
return
resultError
(
'Token Expired!'
,
{
code
:
ResultEnum
.
TIMEOUT
as
number
});
},
},
]
as
MockMethod
[];
]
as
MockMethod
[];
src/api/demo/account.ts
浏览文件 @
6544f84b
...
@@ -4,6 +4,7 @@ import { GetAccountInfoModel } from './model/accountModel';
...
@@ -4,6 +4,7 @@ import { GetAccountInfoModel } from './model/accountModel';
enum
Api
{
enum
Api
{
ACCOUNT_INFO
=
'/account/getAccountInfo'
,
ACCOUNT_INFO
=
'/account/getAccountInfo'
,
SESSION_TIMEOUT
=
'/user/sessionTimeout'
,
SESSION_TIMEOUT
=
'/user/sessionTimeout'
,
TOKEN_EXPIRED
=
'/user/tokenExpired'
,
}
}
// Get personal center-basic settings
// Get personal center-basic settings
...
@@ -11,3 +12,5 @@ enum Api {
...
@@ -11,3 +12,5 @@ enum Api {
export
const
accountInfoApi
=
()
=>
defHttp
.
get
<
GetAccountInfoModel
>
({
url
:
Api
.
ACCOUNT_INFO
});
export
const
accountInfoApi
=
()
=>
defHttp
.
get
<
GetAccountInfoModel
>
({
url
:
Api
.
ACCOUNT_INFO
});
export
const
sessionTimeoutApi
=
()
=>
defHttp
.
post
<
void
>
({
url
:
Api
.
SESSION_TIMEOUT
});
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
浏览文件 @
6544f84b
...
@@ -15,6 +15,7 @@ import { setObjToUrlParams, deepMerge } from '/@/utils';
...
@@ -15,6 +15,7 @@ import { setObjToUrlParams, deepMerge } from '/@/utils';
import
{
useErrorLogStoreWithOut
}
from
'/@/store/modules/errorLog'
;
import
{
useErrorLogStoreWithOut
}
from
'/@/store/modules/errorLog'
;
import
{
useI18n
}
from
'/@/hooks/web/useI18n'
;
import
{
useI18n
}
from
'/@/hooks/web/useI18n'
;
import
{
joinTimestamp
,
formatRequestDate
}
from
'./helper'
;
import
{
joinTimestamp
,
formatRequestDate
}
from
'./helper'
;
import
{
useUserStoreWithOut
}
from
'/@/store/modules/user'
;
const
globSetting
=
useGlobSetting
();
const
globSetting
=
useGlobSetting
();
const
urlPrefix
=
globSetting
.
urlPrefix
;
const
urlPrefix
=
globSetting
.
urlPrefix
;
...
@@ -61,6 +62,9 @@ const transform: AxiosTransform = {
...
@@ -61,6 +62,9 @@ const transform: AxiosTransform = {
switch
(
code
)
{
switch
(
code
)
{
case
ResultEnum
.
TIMEOUT
:
case
ResultEnum
.
TIMEOUT
:
timeoutMsg
=
t
(
'sys.api.timeoutMessage'
);
timeoutMsg
=
t
(
'sys.api.timeoutMessage'
);
const
userStore
=
useUserStoreWithOut
();
userStore
.
setToken
(
undefined
);
userStore
.
logout
(
true
);
break
;
break
;
default
:
default
:
if
(
message
)
{
if
(
message
)
{
...
...
src/views/demo/feat/session-timeout/index.vue
浏览文件 @
6544f84b
...
@@ -3,7 +3,15 @@
...
@@ -3,7 +3,15 @@
title=
"登录过期示例"
title=
"登录过期示例"
content=
"用户登录过期示例,不再跳转登录页,直接生成页面覆盖当前页面,方便保持过期前的用户状态!"
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>
</PageWrapper>
</
template
>
</
template
>
<
script
lang=
"ts"
>
<
script
lang=
"ts"
>
...
@@ -11,24 +19,36 @@
...
@@ -11,24 +19,36 @@
import
{
PageWrapper
}
from
'/@/components/Page'
;
import
{
PageWrapper
}
from
'/@/components/Page'
;
import
{
useUserStore
}
from
'/@/store/modules/user'
;
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
({
export
default
defineComponent
({
name
:
'TestSessionTimeout'
,
name
:
'TestSessionTimeout'
,
components
:
{
PageWrapper
},
components
:
{
ACardGrid
:
Card
.
Grid
,
ACard
:
Card
,
PageWrapper
},
setup
()
{
setup
()
{
const
userStore
=
useUserStore
();
const
userStore
=
useUserStore
();
async
function
test
()
{
async
function
test
1
()
{
// 示例网站生产环境用
得是mock数据,所以不能返回401
,
// 示例网站生产环境用
的是mock数据,不能返回Http状态码
,
// 所以在生产环境直接改变状态来达到测试效果
// 所以在生产环境直接改变状态来达到测试效果
if
(
import
.
meta
.
env
.
PROD
)
{
if
(
import
.
meta
.
env
.
PROD
)
{
userStore
.
setToken
(
undefined
);
userStore
.
setToken
(
undefined
);
userStore
.
setSessionTimeout
(
true
);
userStore
.
setSessionTimeout
(
true
);
}
else
{
}
else
{
// 这个api会返回状态码为401的响应
await
sessionTimeoutApi
();
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
>
</
script
>
编写
预览
Markdown
格式
0%
重试
或
添加新文件
添加附件
取消
您添加了
0
人
到此讨论。请谨慎行事。
请先完成此评论的编辑!
取消
请
注册
或者
登录
后发表评论