抖音实战~用户登出

gblfy

已于 2022-06-23 17:49:05 修改

阅读量377

点赞数

分类专栏：抖音App 文章标签：登出

于 2022-06-18 15:15:32 首次发布

本文链接：https://blog.csdn.net/weixin_40816738/article/details/125347313

版权

抖音App 专栏收录该内容

26 篇文章

订阅专栏

在这里插入图片描述

文章目录

一、前端

1. 登出流程

在这里插入图片描述

2. 流程简述

1.点击登出按钮触发登出事件
2.调用登出后端api
3.后端返回
- 3.1. 成功：删除终端缓存的用户信息和token信息
- 3.2. 失败：提示错误信息
4.跳转主页

3. 源码

<view 
				:class="{'logout':!logoutTouched, 'logout-touched': logoutTouched}" 
				@touchstart="touchstartLogout()"
				@touchend="touchendLogout()"
				@click="logout()"
				style="margin-top: 20rpx;padding-left: 30rpx;padding-right: 30rpx;width: 750rpx;height: 80rpx;display: flex;flex-direction: row;justify-content: center;">
				
				<text style="color: #FFFFFF;align-self: center;font-size: 20px;">退出登录</text>

			</view>

   logout() {
				var me = this;
				var userId = getApp().getUserInfoSession().id;
				
				var serverUrl = app.globalData.serverUrl;
				uni.request({
					method: "POST",
					url: serverUrl + "/passport/logout?userId=" + userId,
					success(result) {
						var status = result.data.status;
						if (status == 200) {
					    	// 清除终端缓存
							getApp().clearUserInfo();
							uni.reLaunch({
								url: "../index/index"
							})
						} else if (status != 200) {
							uni.showToast({
								title: result.data.msg,
								icon: "none"
							});
						}
						
					}
				});				
			}

删除缓存方法

// 清除用户信息
clearUserInfo () {
	uni.removeStorageSync("userInfo");
	uni.removeStorageSync("userToken");
}

二、后端

2.1. 登出逻辑

删除redis缓存

2.2. 源码

    @PostMapping("logout")
    public GraceJSONResult logout(@RequestParam String userId,
                                  HttpServletRequest request) throws Exception {

        // 后端只需要清除用户的token信息即可，前端也需要清除，清除本地app中的用户信息和token会话信息
        redis.del(REDIS_USER_TOKEN + ":" + userId);

        return GraceJSONResult.ok();
    }