抖音实战~用户登出

一、前端

1. 登录流程

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

2. 源码

<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"
							});
						}
						
					}
				});				
			}

3. 删除缓存方法

// 清除用户信息
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();
    }