123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475 |
- <!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">
- /**
- * 跳转单点登录
- */
- function ssoLogin() {
- const clientId = 'yudao-sso-demo-by-code'; // 可以改写成,你的 clientId
- const redirectUri = encodeURIComponent('http://127.0.0.1:18080/callback.html'); // 注意,需要使用 encodeURIComponent 编码地址
- const responseType = 'code'; // 1)授权码模式,对应 code;2)简化模式,对应 token
- window.location.href = 'http://127.0.0.1:1024/sso?client_id=' + clientId
- + '&redirect_uri=' + redirectUri
- + '&response_type=' + responseType;
- }
- $(function () {
- const accessToken = localStorage.getItem('ACCESS-TOKEN');
- // 情况一:未登录
- if (!accessToken) {
- $('#noLoginDiv').css("display", "block");
- return;
- }
- // 情况二:已登录
- $('#yesLoginDiv').css("display", "block");
- $('#accessTokenSpan').html(accessToken);
- // 获得登录用户的信息
- $.ajax({
- url: "http://127.0.0.1:18080/user/get",
- method: 'GET',
- headers: {
- 'Authentication': 'Bearer ' + accessToken
- },
- success: function (result) {
- if (result.code !== 0) {
- alert('获得个人信息失败,原因:' + result.msg)
- return;
- }
- $('#nicknameSpan').html(result.data.nickname);
- }
- });
- })
- </script>
- </head>
- <body>
- <!-- 情况一:未登录:1)跳转 ruoyi-vue-pro 的 SSO 登录页 -->
- <div id="noLoginDiv" style="display: none">
- 您未登录,点击 <a href="#" onclick="ssoLogin()">跳转 </a> SSO 单点登录
- </div>
- <!-- 情况二:已登录:1)展示用户信息;2)刷新访问令牌;3)退出登录 -->
- <div id="yesLoginDiv" style="display: none">
- 您已登录!<button>退出登录</button> <br />
- 昵称:<span id="nicknameSpan"> 加载中... </span> <button>修改昵称</button> <br />
- 访问令牌:<span id="accessTokenSpan"> 加载中... </span> <br />
- </div>
- </body>
- <style>
- body { /** 页面居中 */
- border-radius: 20px;
- height: 350px;
- position: absolute;
- left: 50%;
- top: 50%;
- transform: translate(-50%,-50%);
- }
- </style>
- </html>
|