抖音实战~用户登出

文章目录

• ​​一、前端​​

• ​​1. 登出流程​​
• ​​2. 流程简述​​
• ​​3. 源码​​

• ​​二、后端​​

• ​​2.1. 登出逻辑​​
• ​​2.2. 源码​​

一、前端

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. 源码

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

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

        return GraceJSONResult.ok();
    }