2022-09-29 21:26:31 +08:00
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
|
<title>首页</title>
|
|
|
|
|
|
<!-- jQuery：操作 dom、发起请求等 -->
|
|
|
|
|
|
<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/jquery/2.1.2/jquery.min.js" type="application/javascript"></script>
|
|
|
|
|
|
|
|
|
|
|
|
<script type="application/javascript">
|
|
|
|
|
|
|
2022-10-03 17:52:51 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* 跳转单点登录
|
2022-09-29 21:26:31 +08:00
|
|
|
|
*/
|
2022-10-03 17:52:51 +08:00
|
|
|
|
function ssoLogin() {
|
|
|
|
|
|
const clientId = 'yudao-sso-demo-by-code'; // 可以改写成，你的 clientId
|
2022-09-29 23:59:42 +08:00
|
|
|
|
const redirectUri = encodeURIComponent('http://127.0.0.1:18080/callback.html'); // 注意，需要使用 encodeURIComponent 编码地址
|
2022-09-29 21:26:31 +08:00
|
|
|
|
const responseType = 'code'; // 1）授权码模式，对应 code；2）简化模式，对应 token
|
|
|
|
|
|
window.location.href = 'http://127.0.0.1:1024/sso?client_id=' + clientId
|
2022-10-03 17:52:51 +08:00
|
|
|
|
+ '&redirect_uri=' + redirectUri
|
|
|
|
|
|
+ '&response_type=' + responseType;
|
2022-09-29 21:26:31 +08:00
|
|
|
|
}
|
2022-10-01 08:35:19 +08:00
|
|
|
|
|
2022-10-01 20:30:15 +08:00
|
|
|
|
/**
|
2022-10-03 17:52:51 +08:00
|
|
|
|
* 修改昵称
|
2022-10-01 20:30:15 +08:00
|
|
|
|
*/
|
|
|
|
|
|
function updateNickname() {
|
|
|
|
|
|
const nickname = prompt("请输入新的昵称", "");
|
|
|
|
|
|
if (!nickname) {
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
// 更新用户的昵称
|
|
|
|
|
|
const accessToken = localStorage.getItem('ACCESS-TOKEN');
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: "http://127.0.0.1:18080/user/update?nickname=" + nickname,
|
|
|
|
|
|
method: 'PUT',
|
|
|
|
|
|
headers: {
|
2022-10-03 17:52:51 +08:00
|
|
|
|
'Authorization': 'Bearer ' + accessToken
|
2022-10-01 20:30:15 +08:00
|
|
|
|
},
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
if (result.code !== 0) {
|
|
|
|
|
|
alert('更新昵称失败，原因：' + result.msg)
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
alert('更新昵称成功！');
|
|
|
|
|
|
$('#nicknameSpan').html(nickname);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2022-10-03 17:52:51 +08:00
|
|
|
|
}
|
2022-10-01 20:30:15 +08:00
|
|
|
|
|
2022-10-01 20:49:11 +08:00
|
|
|
|
/**
|
2022-10-03 17:52:51 +08:00
|
|
|
|
* 刷新令牌
|
2022-10-01 20:49:11 +08:00
|
|
|
|
*/
|
|
|
|
|
|
function refreshToken() {
|
|
|
|
|
|
const refreshToken = localStorage.getItem('REFRESH-TOKEN');
|
|
|
|
|
|
if (!refreshToken) {
|
|
|
|
|
|
alert("获取不到刷新令牌");
|
|
|
|
|
|
return;
|
2022-10-03 17:52:51 +08:00
|
|
|
|
}
|
2022-10-01 20:49:11 +08:00
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: "http://127.0.0.1:18080/auth/refresh-token?refreshToken=" + refreshToken,
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
if (result.code !== 0) {
|
|
|
|
|
|
alert('刷新访问令牌失败，原因：' + result.msg)
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
alert('更新访问令牌成功！');
|
|
|
|
|
|
$('#accessTokenSpan').html(result.data.access_token);
|
|
|
|
|
|
|
|
|
|
|
|
// 设置到 localStorage 中
|
|
|
|
|
|
localStorage.setItem('ACCESS-TOKEN', result.data.access_token);
|
|
|
|
|
|
localStorage.setItem('REFRESH-TOKEN', result.data.refresh_token);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
2022-10-03 17:52:51 +08:00
|
|
|
|
}
|
2022-10-01 20:49:11 +08:00
|
|
|
|
|
2022-10-01 21:26:45 +08:00
|
|
|
|
/**
|
|
|
|
|
|
* 刷新令牌
|
|
|
|
|
|
*/
|
|
|
|
|
|
function logout() {
|
|
|
|
|
|
const accessToken = localStorage.getItem('ACCESS-TOKEN');
|
|
|
|
|
|
if (!accessToken) {
|
|
|
|
|
|
location.reload();
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: "http://127.0.0.1:18080/auth/logout",
|
|
|
|
|
|
method: 'POST',
|
|
|
|
|
|
headers: {
|
2022-10-03 17:52:51 +08:00
|
|
|
|
'Authorization': 'Bearer ' + accessToken
|
2022-10-01 21:26:45 +08:00
|
|
|
|
},
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
if (result.code !== 0) {
|
|
|
|
|
|
alert('退出登录失败，原因：' + result.msg)
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
|
|
|
|
|
alert('退出登录成功！');
|
|
|
|
|
|
// 删除 localStorage 中
|
|
|
|
|
|
localStorage.removeItem('ACCESS-TOKEN');
|
|
|
|
|
|
localStorage.removeItem('REFRESH-TOKEN');
|
|
|
|
|
|
|
|
|
|
|
|
location.reload();
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
2022-10-01 08:35:19 +08:00
|
|
|
|
$(function () {
|
|
|
|
|
|
const accessToken = localStorage.getItem('ACCESS-TOKEN');
|
|
|
|
|
|
// 情况一：未登录
|
2022-10-03 17:52:51 +08:00
|
|
|
|
if (!accessToken) {
|
2022-10-01 08:35:19 +08:00
|
|
|
|
$('#noLoginDiv').css("display", "block");
|
|
|
|
|
|
return;
|
2022-10-03 17:52:51 +08:00
|
|
|
|
}
|
2022-10-01 08:35:19 +08:00
|
|
|
|
|
|
|
|
|
|
// 情况二：已登录
|
|
|
|
|
|
$('#yesLoginDiv').css("display", "block");
|
|
|
|
|
|
$('#accessTokenSpan').html(accessToken);
|
|
|
|
|
|
// 获得登录用户的信息
|
|
|
|
|
|
$.ajax({
|
|
|
|
|
|
url: "http://127.0.0.1:18080/user/get",
|
|
|
|
|
|
method: 'GET',
|
|
|
|
|
|
headers: {
|
2022-10-03 17:52:51 +08:00
|
|
|
|
'Authorization': 'Bearer ' + accessToken
|
2022-10-01 08:35:19 +08:00
|
|
|
|
},
|
|
|
|
|
|
success: function (result) {
|
|
|
|
|
|
if (result.code !== 0) {
|
|
|
|
|
|
alert('获得个人信息失败，原因：' + result.msg)
|
|
|
|
|
|
return;
|
|
|
|
|
|
}
|
2022-10-01 10:52:27 +08:00
|
|
|
|
$('#nicknameSpan').html(result.data.nickname);
|
2022-10-01 08:35:19 +08:00
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
})
|
2022-09-29 21:26:31 +08:00
|
|
|
|
</script>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
2022-10-03 17:52:51 +08:00
|
|
|
|
<!-- 情况一：未登录：1）跳转 ruoyi-vue-pro 的 SSO 登录页 -->
|
|
|
|
|
|
<div id="noLoginDiv" style="display: none">
|
|
|
|
|
|
您未登录，点击 <a href="#" onclick="ssoLogin()">跳转 </a> SSO 单点登录
|
|
|
|
|
|
</div>
|
2022-09-29 21:26:31 +08:00
|
|
|
|
|
2022-10-03 17:52:51 +08:00
|
|
|
|
<!-- 情况二：已登录：1）展示用户信息；2）刷新访问令牌；3）退出登录 -->
|
|
|
|
|
|
<div id="yesLoginDiv" style="display: none">
|
|
|
|
|
|
您已登录！<button onclick="logout()">退出登录</button> <br />
|
|
|
|
|
|
昵称：<span id="nicknameSpan"> 加载中... </span> <button onclick="updateNickname()">修改昵称</button> <br />
|
|
|
|
|
|
访问令牌：<span id="accessTokenSpan"> 加载中... </span> <button onclick="refreshToken()">刷新令牌</button> <br />
|
|
|
|
|
|
</div>
|
2022-09-29 21:26:31 +08:00
|
|
|
|
</body>
|
2022-10-01 08:35:19 +08:00
|
|
|
|
<style>
|
|
|
|
|
|
body { /** 页面居中 */
|
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
|
height: 350px;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 50%;
|
|
|
|
|
|
top: 50%;
|
|
|
|
|
|
transform: translate(-50%,-50%);
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
2022-09-29 21:26:31 +08:00
|
|
|
|
</html>
|
