spring security+oauth2退出登录（一）-正常的退出登录

流程

详细代码

/logout

1.vue前台点击退出登录，调用/logout接口，/logout接口使用thymeleaf跳转到logout.html页面

@Controller
public class LogoutController {

    /**
     * 正常退出登录接口
     * 
     * @param clientId
     * @param accessToken
     * @return
     */
    @GetMapping("/logout/page")
    public ModelAndView logout(String clientId, String accessToken) {
        Map<String, String> data = new HashMap<>();
        data.put("clientId", clientId);
        data.put("accessToken", accessToken);
        return new ModelAndView("/logout", data);
    }
}

logout.html

logout.html并没有显示只有两个逻辑 1.调用退出登录的接口去清除token和session

2.调用获取授权码接口重写跳转到login页面

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>vue模板</title>
    <!--<link rel="stylesheet" type="text/css" media="all" href="/css/element.css" th:href="@{/css/element.css}"/>-->
    <script type="text/javascript" src="../js/vue2.6.8.min.js" th:src="@{/js/vue2.6.8.min.js}"></script>
    <!--<script type="text/javascript" src="../js/element.js" th:src="@{/js/element.js}"></script>-->
    <script type="text/javascript" src="../js/axios.min.js" th:src="@{/js/axios.min.js}"></script>
    <script type="text/javascript" src="../js/httpConfig.js" th:src="@{/js/httpConfig.js}"></script>
    <style type="text/css">
        body {
            font-family: "微软雅黑";
        }
        .meveBox p {
            margin: 0;
            margin-left: 8px;
            padding: 0;
            font-weight: bold;
        }
    </style>
</head>
<body>
<div id="app">
    <div id="test">
    </div>
</div>
</body>
<script th:inline="javascript">
    new Vue({
        el: '#app',
        data: {},
        created() {
            this.authorize()
        },
        mounted() {
        },
        methods: {
            authorize() {
                var clientId = [[${clientId}]]
                var getCookie = this.getCookie("JSESSIONID")
                var accessToken = [[${accessToken}]]
                axios.request({
                    method: 'get',
                    url: serveHttp + '/oauth/customLogout?access_token=' + accessToken,
                    headers: {
                        'Content-Type': 'application/json',
                        'Cookie': getCookie
                    }
                }).then(function (res) {
                    console.log("--------" + res);
                    window.location.href = serveHttp + "/oauth/authorize?client_id=" + clientId + "&response_type=code"

                })
                    .catch(function (error) {
                    })
            },
            //获取cookie
            getCookie: function (cname) {
                var name = cname + "=";
                var ca = document.cookie.split(';');
                for (var i = 0; i < ca.length; i++) {
                    var c = ca[i];
                    while (c.charAt(0) == ' ') c = c.substring(1);
                    if (c.indexOf(name) != -1) {
                        return c.substring(name.length, c.length);
                    }
                }
                return "";
            },
        }
    })
</script>
</html>

OauthController

清除token与session接口

这里实现了单点登录我们在redis查询相同用户，相同ip，相同浏览器的token 全部失效

同时我们必须清除cookie 因为在调用接口时我们使用token判断是否有权限但是在登录时确是以session与cookie来确认登录状态后台会保存session 如果在获取授权码时携带的是已经登录的cookie 那么就不会再次登录直接获取授权码这样是错误的！

所以我们在退出登录时也需要清除session与cookie 保证下次登录时需要输入账号密码

此处有跨域的问题只有转跳到后端页面才能清除后端的session 这个是logout.html存在的目的

@RestController
@RequestMapping("/oauth")
public class OauthController {

    @Autowired
    private RedisTemplate redisTemplate;

    @Autowired
    @Lazy
    private TokenStore tokenStore;

    @Autowired
    private TokenEndpoint tokenEndpoint;

    @Autowired
    private SessionRegistry sessionRegistry;

    @Autowired
    Utils utils;

    @GetMapping("/customLogout")
    public void logout(@RequestParam String access_token) throws IOException {
        if (StringUtils.isNotBlank(access_token)) {
            // 获取当前传入token信息
            OAuth2AccessToken inputAccessToken = tokenStore.readAccessToken(access_token);
            if (inputAccessToken != null) {
                // 获取ip和用户信息
                String ip = String.valueOf(inputAccessToken.getAdditionalInformation().get("client_Ip"));
                String user_name = String.valueOf(inputAccessToken.getAdditionalInformation().get("user_name"));
                String web_name = String.valueOf(inputAccessToken.getAdditionalInformation().get("web_name"));
                // 获取所有token
                List<OAuth2AccessToken> allToken = utils.getAllToken();
                for (OAuth2AccessToken oAuth2AccessToken : allToken) {
                    if (ip.equals(oAuth2AccessToken.getAdditionalInformation().get("client_Ip"))
                        && user_name.equals(oAuth2AccessToken.getAdditionalInformation().get("user_name"))
                        && web_name.equals(oAuth2AccessToken.getAdditionalInformation().get("web_name"))) {
                        // 这些token需要退出登录
                        tokenStore.removeAccessToken(oAuth2AccessToken);
                    }
                }
            }
            // 清除cookie
            HttpServletResponse response = utils.clearCookie();
            response.setStatus(HttpStatus.OK.value());
            response.setHeader("Content-Type", "application/json;charset=UTF-8");
            Result result = new Result(200, "退出登录成功");
            response.getWriter().write(new ObjectMapper().writeValueAsString(result));
        }
    }
}

spring security+oauth2退出登录（一）-正常的退出登录

流程

详细代码

/logout

logout.html

OauthController

猜你喜欢