登出功能----注意只有在发送请求后才后验证是否失效

188 阅读1分钟

1.介绍登出功能及实现

1.1登出功能介绍----无需调用接口,需要单独处理token&删除用户资料

登出功能不仅仅是登出系统,还涉及到用户token的删除,用户资料的删除 image.png

1.2登出功能实现步骤----在Vuex中的action中写

image.png

2.token失效----登出功能的主动处理

开门的钥匙并不是一直都是有效的,如果一直有效,则会有风险,对于token的处理包括主动处理和被动处理

2.1主动token失效--关键时间点存入时间戳和检查时间戳--是否需要持久化

image.png

2.2流程

2.2.1设置时间

image.png

2.2.2持久化&映射处理

npm install --save vuex-persistedstate@3.2.1----不一定要下载该版本

image.png

2.2.3检查时间戳判断是否失效

image.png

image.png

image.png

出现问题:只要刷新时才显示token失效

3.token失效----登出功能的被动处理

基础原理:token超时的错误码是**10002**

image.png