feat[litemall-wx， litemall-wx-api]: 微信小程序支持退出登录操作

litemall-wx-api/src/main/java/org/linlinjava/litemall/wx/service/UserTokenManager.java

@@ -72,4 +72,11 @@ public class UserTokenManager {
 
         return userToken.getSessionKey();
     }
+
+    public static void removeToken(Integer userId) {
+        UserToken userToken = idMap.get(userId);
+        String token = userToken.getToken();
+        idMap.remove(userId);
+        tokenMap.remove(token);
+    }
 }

litemall-wx-api/src/main/java/org/linlinjava/litemall/wx/web/WxAuthController.java

@@ -356,4 +356,13 @@ public class WxAuthController {
         }
         return ResponseUtil.ok();
     }
+
+    @PostMapping("logout")
+    public Object logout(@LoginUser Integer userId) {
+        if (userId == null) {
+            return ResponseUtil.unlogin();
+        }
+        UserTokenManager.removeToken(userId);
+        return ResponseUtil.ok();
+    }
 }

litemall-wx/config/api.js

@@ -15,6 +15,7 @@ module.exports = {
 
  AuthLoginByWeixin: WxApiRoot + 'auth/login_by_weixin', //微信登录
  AuthLoginByAccount: WxApiRoot + 'auth/login', //账号登录
+ AuthLogout: WxApiRoot + 'auth/logout', //账号登出
  AuthRegister: WxApiRoot + 'auth/register', //账号注册
  AuthReset: WxApiRoot + 'auth/reset', //账号密码重置
  AuthRegisterCaptcha: WxApiRoot + 'auth/regCaptcha', //验证码

litemall-wx/pages/ucenter/index/index.js

@@ -14,7 +14,8 @@ Page({
       unship: 0,
       unrecv: 0,
       uncomment: 0
-    }
+    },
+    hasLogin: false
   },
   onLoad: function(options) {
     // 页面初始化 options为页面跳转所带来的参数
@@ -29,10 +30,11 @@ Page({
       let userInfo = wx.getStorageSync('userInfo');
       this.setData({
         userInfo: userInfo,
+        hasLogin: true
       });
 
       let that = this;
-      util.request(api.UserIndex).then(function (res) {
+      util.request(api.UserIndex).then(function(res) {
         if (res.errno === 0) {
           that.setData({
             order: res.data.order
@@ -50,14 +52,14 @@ Page({
     // 页面关闭
   },
   goLogin() {
-    if (!app.globalData.hasLogin) {
+    if (!this.data.hasLogin) {
       wx.navigateTo({
         url: "/pages/auth/login/login"
       });
     }
   },
   goOrder() {
-    if (app.globalData.hasLogin) {
+    if (this.data.hasLogin) {
       wx.navigateTo({
         url: "/pages/ucenter/order/order"
       });
@@ -67,56 +69,67 @@ Page({
       });
     }
   },
-    goOrderIndex(e) {
-    let tab = e.currentTarget.dataset.index
-    let route = e.currentTarget.dataset.route
-    try {
-      wx.setStorageSync('tab', tab);
-    } catch (e) {
+  goOrderIndex(e) {
+    if (this.data.hasLogin) {
+      let tab = e.currentTarget.dataset.index
+      let route = e.currentTarget.dataset.route
+      try {
+        wx.setStorageSync('tab', tab);
+      } catch (e) {
 
-    }
-    wx.navigateTo({
-      url: route,
-      success: function(res) {},
-      fail: function(res) {},
-      complete: function(res) {},
-    })
+      }
+      wx.navigateTo({
+        url: route,
+        success: function(res) {},
+        fail: function(res) {},
+        complete: function(res) {},
+      })
+    } else {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    };
   },
   goCoupon() {
-    if (app.globalData.hasLogin) {
+    wx.showToast({
+      title: '目前不支持',
+      icon: 'none',
+      duration: 2000
+    });
+    // if (this.data.hasLogin) {
+    //   wx.navigateTo({
+    //     url: "/pages/ucenter/coupon/coupon"
+    //   });
+    // } else {
+    //   wx.navigateTo({
+    //     url: "/pages/auth/login/login"
+    //   });
+    // };
+  },
+  goGroupon() {
+    if (this.data.hasLogin) {
       wx.navigateTo({
-        url: "/pages/ucenter/coupon/coupon"
+        url: "/pages/groupon/myGroupon/myGroupon"
       });
     } else {
       wx.navigateTo({
         url: "/pages/auth/login/login"
       });
     };
- },
- goGroupon() {
-  if (app.globalData.hasLogin) {
-   wx.navigateTo({
-    url: "/pages/groupon/myGroupon/myGroupon"
-   });
-  } else {
-   wx.navigateTo({
-    url: "/pages/auth/login/login"
-   });
-  };
- },
- goCollect() {
-  if (app.globalData.hasLogin) {
-   wx.navigateTo({
-    url: "/pages/ucenter/collect/collect"
-   });
-  } else {
-   wx.navigateTo({
-    url: "/pages/auth/login/login"
-   });
-  };
- },
-   goFeedback(e) {
-    if (app.globalData.hasLogin) {
+  },
+  goCollect() {
+    if (this.data.hasLogin) {
+      wx.navigateTo({
+        url: "/pages/ucenter/collect/collect"
+      });
+    } else {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    };
+  },
+  goFeedback(e) {
+    if (this.data.hasLogin) {
       wx.navigateTo({
         url: "/pages/ucenter/feedback/feedback"
       });
@@ -126,80 +139,87 @@ Page({
       });
     };
   },
- goFootprint() {
-  if (app.globalData.hasLogin) {
-   wx.navigateTo({
-    url: "/pages/ucenter/footprint/footprint"
-   });
-  } else {
-   wx.navigateTo({
-    url: "/pages/auth/login/login"
-   });
-  };
- },
- goAddress() {
-  if (app.globalData.hasLogin) {
-   wx.navigateTo({
-    url: "/pages/ucenter/address/address"
-   });
-  } else {
-   wx.navigateTo({
-    url: "/pages/auth/login/login"
-   });
-  };
- },
-bindPhoneNumber: function (e) {
-  if (e.detail.errMsg !== "getPhoneNumber:ok"){
-    // 拒绝授权
-    return;
-  }
+  goFootprint() {
+    if (this.data.hasLogin) {
+      wx.navigateTo({
+        url: "/pages/ucenter/footprint/footprint"
+      });
+    } else {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    };
+  },
+  goAddress() {
+    if (this.data.hasLogin) {
+      wx.navigateTo({
+        url: "/pages/ucenter/address/address"
+      });
+    } else {
+      wx.navigateTo({
+        url: "/pages/auth/login/login"
+      });
+    };
+  },
+  bindPhoneNumber: function(e) {
+    if (e.detail.errMsg !== "getPhoneNumber:ok") {
+      // 拒绝授权
+      return;
+    }
+
+    if (!this.data.hasLogin) {
+      wx.showToast({
+        title: '绑定失败：请先登录',
+        icon: 'none',
+        duration: 2000
+      });
+      return;
+    }
 
-  if (!app.globalData.hasLogin) {
+    util.request(api.AuthBindPhone, {
+      iv: e.detail.iv,
+      encryptedData: e.detail.encryptedData
+    }, 'POST').then(function(res) {
+      if (res.errno === 0) {
+        wx.showToast({
+          title: '绑定手机号码成功',
+          icon: 'success',
+          duration: 2000
+        });
+      }
+    });
+  },
+  goAfterSale: function() {
     wx.showToast({
-      title: '绑定失败：请先登录',
+      title: '目前不支持',
       icon: 'none',
       duration: 2000
     });
-    return;
-  }
+  },
+  aboutUs: function() {
+    wx.navigateTo({
+      url: '/pages/about/about'
+    });
+  },
+  exitLogin: function() {
+    wx.showModal({
+      title: '',
+      confirmColor: '#b4282d',
+      content: '退出登录？',
+      success: function(res) {
+        if (!res.confirm) {
+          return;
+        }
 
-  util.request(api.AuthBindPhone, { iv: e.detail.iv, encryptedData: e.detail.encryptedData }, 'POST').then(function (res) {
-    if (res.errno === 0) {
-      wx.showToast({
-        title: '绑定手机号码成功',
-        icon: 'success',
-        duration: 2000
-      });
-    }
-  });
-},
-goAfterSale: function () {
-  wx.showToast({
-    title: '目前不支持',
-    icon: 'none',
-    duration: 2000
-  });
-},
-aboutUs: function () {
-  wx.navigateTo({
-    url: '/pages/about/about'
-  });
-}, 
- exitLogin: function() {
-  wx.showModal({
-   title: '',
-   confirmColor: '#b4282d',
-   content: '退出登录？',
-   success: function(res) {
-    if (res.confirm) {
-     wx.removeStorageSync('token');
-     wx.removeStorageSync('userInfo');
-     wx.switchTab({
-      url: '/pages/index/index'
-     });
-    }
-   }
-  })
+        util.request(api.AuthLogout, {}, 'POST');
+        app.globalData.hasLogin = false;
+        wx.removeStorageSync('token');
+        wx.removeStorageSync('userInfo');
+        wx.reLaunch({
+          url: '/pages/index/index'
+        });
+      }
+    })
 
   }
 })

litemall-wx/pages/ucenter/index/index.wxml

@@ -71,30 +71,30 @@
   <view class='user_row'>
     <view class='user_row_left'>必备工具</view>
   </view>
-  <view class='user_tool_area'>
-    <view class='user_tool_item' bindtap='goAddress'>
-      <image class='user_tool_item_image' src='/static/images/address.png'></image>
-      <view class='user_tool_item_text'>地址管理</view>
+  <view class='user_column'>
+    <view class='user_column_item' bindtap='goAddress'>
+      <image class='user_column_item_image' src='/static/images/address.png'></image>
+      <view class='user_column_item_text'>地址管理</view>
     </view>
-    <button class="user_tool_item_phone" open-type="getPhoneNumber" bindgetphonenumber="bindPhoneNumber">
-      <image class='user_tool_item_image' src='/static/images/mobile.png'></image>
-      <view class='user_tool_item_text'>绑定手机</view>
+    <button class="user_column_item_phone" open-type="getPhoneNumber" bindgetphonenumber="bindPhoneNumber">
+      <image class='user_column_item_image' src='/static/images/mobile.png'></image>
+      <view class='user_column_item_text'>绑定手机</view>
     </button>
-    <view class='user_tool_item' bindtap='goFeedback'>
-      <image class='user_tool_item_image' src='/static/images/feedback.png'></image>
-      <view class='user_tool_item_text'>意见反馈</view>
+    <view class='user_column_item' bindtap='goFeedback'>
+      <image class='user_column_item_image' src='/static/images/feedback.png'></image>
+      <view class='user_column_item_text'>意见反馈</view>
     </view>
-    <view class='user_tool_item'>
+    <view class='user_column_item'>
       <contact-button style="opacity:0;position:absolute;" type="default-dark" session-from="weapp" size="27">
       </contact-button>
-      <image class='user_tool_item_image' src='/static/images/customer.png'></image>
-      <view class='user_tool_item_text'>联系客服</view>
+      <image class='user_column_item_image' src='/static/images/customer.png'></image>
+      <view class='user_column_item_text'>联系客服</view>
     </view>
-    <view class='user_tool_item' bindtap='aboutUs'>
-      <image class='user_tool_item_image' src='/static/images/about_us.png'></image>
-      <view class='user_tool_item_text'>关于我们</view>
+    <view class='user_column_item' bindtap='aboutUs'>
+      <image class='user_column_item_image' src='/static/images/about_us.png'></image>
+      <view class='user_column_item_text'>关于我们</view>
     </view>
   </view>
 
-  <!--<view class="logout" bindtap="exitLogin">退出登录</view>-->
+  <view class="logout" wx:if="{{hasLogin}}" bindtap="exitLogin">退出登录</view>
 </view>

litemall-wx/pages/ucenter/index/index.wxss

@@ -135,60 +135,8 @@ page {
   height: 6rpx;
 }
 
-.box_bottom_area {
-  /* border: 1px solid black; *//* margin-top: 32rpx; */
-  height: auto;
-  background: #fff;
-}
-
-.user_tool_item {
-  width: 187.5rpx;
-  height: 142rpx;
-  /* border: 1px solid #757575; */
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  float: left;
-  background: #fff;
-  border-bottom: 1px solid #fafafa;
-}
-
-.user_tool_item_image {
-  /* border: 1px solid #757575; */
-  width: 50rpx;
-  height: 50rpx;
-  margin-top: 23rpx;
-}
-
-.user_tool_item_text {
-  /* border: 1px solid #757575; */
-  width: 187.5rpx;
-  margin-bottom: 12rpx;
-  height: 42rpx;
-  line-height: 42rpx;
-  font-size: 23rpx;
-  color: #555;
-}
-
-.user_tool_item {
-  width: 187.5rpx;
-  height: 142rpx;
-  /* border: 1px solid #757575; */
-  text-align: center;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-wrap: wrap;
-  float: left;
-  background: #fff;
-  border-bottom: 1px solid #fafafa;
-}
-
-.user_tool_item_phone {
-  width:187.5rpx;
-  height:142rpx;
+.user_column_item_phone {
+  width: 30%;
   text-align:center;
   display:flex;
   justify-content:center;
@@ -198,6 +146,17 @@ page {
   background:#fff;
   border-bottom:1px solid #fafafa;
 }
-.user_tool_item_phone::after{
+.user_column_item_phone::after{
   border: none;
 }
+
+.logout{
+    margin-top: 30rpx;
+    height: 100rpx;
+    width: 100%;
+    line-height: 100rpx;
+    text-align: center;
+    background: #fff;
+    color: red;
+    font-size: 30rpx;
+}