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

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/258742.html

標籤：其他

上一篇：文本縮略問題-位置

下一篇：Vue框架——事件系結