淘东电商项目（27） -门户登出功能

引言

本文代码已提交至Github（版本号：42c2ed4af58dac7388e399a1f3606baf4c57744e），有兴趣的同学可以下载来看看：https://github.com/ylw-github/taodong-shop

在前面的两篇博客，实现了「注册」和「登录」的功能：

本文主要讲解“登出功能”，虽然功能看上去比较简单，但是遇到了不少的坑。

本文目录结构：
l____引言
 l____ 1. 功能演示及实现思路
 l____ 2. 登出功能
 l________ 2.1 前端代码
 l________ 2.2 后端代码
 l____ 3. 遇到的坑
 l________ 3.1 JQ ajax请求后台不能“请求转发”或者“重定向”
l________ 3.2 JQ ajax 返回格式的指定格式
 l____总结

1. 功能演示及实现思路

实现思路：

会员登录成功后，点击主页面右上角的退出，请求后台
后台删除Cookie信息里面的token
后台根据token删除Redis里保存的token
后台根据token更新数据库里面对应的token记录

功能演示：

1.首先登录，登录成功后，界面如下：
在这里插入图片描述
2.登录成功后，可以看到Redis和数据库均有内容：

redis	数据库

3.点击右上角的退出，点击完后，可以看到自动跳转到主页面：

点击前	点击后

4.同时Redis和数据库里的内容均有改变：

Redis	数据库

2. 登出功能

2.1 前端代码

前端我使用的是jq的ajax请求，使用的是RESTful标准请求（如果对RESTful不清楚，可以参考我的博客：《RESTful Web 服务四种操作POST/DELETE/PUT/GET》），代码如下：

html代码:

 <a href="javascript:void(0);" onclick="logout();">退出</a>

js代码:

 <!--引入JQuery-->
    <script src="../res/static/js/jquery.min.js"></script>
    <script type="text/javascript">

        function logout() {
            $.ajax({
                type: "delete",
                url: "exit",
                contentType: "application/json",
                dataType: "json",
                success: function (result) {
                    window.location.href = "/";
                },
                error: function (result) {
                }
            });
        }

    </script>

2.2 后端代码

控制层（使用的是Feign远程调用）：

@Controller
public class LogoutController extends BaseWebController {

    @Autowired
    private MemberLogoutServiceFeign memberLogoutServiceFeign;


    @DeleteMapping("/exit")
    @ResponseBody
    public BaseResponse<JSONObject> exit(HttpServletRequest request, HttpServletResponse response, Model model) {
        // 1.从cookie 中 获取 会员token
        String token = CookieUtils.getCookieValue(request, WebConstants.LOGIN_TOKEN_COOKIENAME, true);
        CookieUtils.deleteCookie(request, response, WebConstants.LOGIN_TOKEN_COOKIENAME);
        if (!StringUtils.isEmpty(token)) {
            // 2.调用登出服务接口
            return memberLogoutServiceFeign.logout(token);
        }
        return null;
    }
}

会员服务里面的登出接口实现（使用的是Redis与数据库的事务同步工具类，不懂的可以下载代码看，前面的文章已讲过）：

@RestController
public class MemberLogOutServiceImpl extends BaseApiService<JSONObject> implements MemberLogOutService {

    @Autowired
    private GenerateToken generateToken;

    @Autowired
    private UserTokenMapper userTokenMapper;

    /**
     * 手动事务工具类
     */
    @Autowired
    private RedisDataSoureceTransaction manualTransaction;

    @Override
    public BaseResponse<JSONObject> logout(String token) {
        TransactionStatus transactionStatus = null;
        try {
            transactionStatus = manualTransaction.begin();
            //2.删除Redis
            generateToken.removeToken(token);
            //1.首先更新数据库
            int updateTokenAvailability = userTokenMapper.updateTokenAvailability(token);
            if (updateTokenAvailability < 0) {
                manualTransaction.rollback(transactionStatus);
                return setResultError("系统错误");
            }
            manualTransaction.commit(transactionStatus);
            JSONObject data = new JSONObject();
            data.put("result", true);
            return setResultSuccess(data);
        } catch (Exception e) {
            try {
                // 回滚事务
                manualTransaction.rollback(transactionStatus);
            } catch (Exception e1) {
            }
            return setResultError("系统错误!");
        }
    }
}

3. 遇到的坑

3.1 JQ ajax请求后台不能“请求转发”或者“重定向”

调用后台登出接口的时候，如果直接返回redirect:/，前端页面是不会直接跳转到的，这是为什么呢？

因为JQ使用ajax是禁止后台执行“请求转发”或者“重定向”的，只能后台返回数据，由前端使用window.location.href执行页面的跳转。如下代码：

$.ajax({
         type: "delete",
         url: "exit",
         contentType: "application/json",
         dataType: "json",
         success: function (result) {
             window.location.href = "/";
         },
         error: function (result) {
         }
     });
 }
);