limeng
/
ssh_sso


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128
							<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Sa-Sso-Pro Client 端 - 前后端分离对接演示</title>
		<style type="text/css">
			body{/* background-color: #A7D2CA; */}
			*{margin: 0px; padding: 0px;}
			.login-box{max-width: 1000px; text-align: center; margin: 30px auto; padding: 1em;}
			.login-info, .un-login-info{line-height: 40px; display: none;}
			.logo-box img{width: 220px; height: 220px;}
			p{color: #666;}
			.green{color: green;}
			.red{color: red;}
			a{text-decoration: none; margin-right: 10px; line-height: 20px; display: inline-block; border-bottom: 1px solid #FFF;}
			a:hover{border-bottom: 1px solid blue;}
			h3{margin-top: 20px; margin-bottom: 0px; color: #000;}
			/* loading框样式 */
			.ajax-layer-load.layui-layer-dialog{min-width: 0px !important; background-color: rgba(0,0,0,0.85);}
			.ajax-layer-load.layui-layer-dialog .layui-layer-content{padding: 10px 20px 10px 40px; color: #FFF;}
			.ajax-layer-load.layui-layer-dialog .layui-layer-content .layui-layer-ico{width: 20px; height: 20px; background-size: 20px 20px; top: 12px; }
		</style>
	</head>
	<body>
		<div class="login-box">
			<div class="logo-box">
				<img src="https://sa-token.cc/logo.png" alt="logo">
			</div>
			<br>
			<h2>Sa-Sso-Pro Client 端 - 前后端分离对接演示</h2> <br>
			<p>当前系统：<span class="client-domain"></span></p> <br>
			<!-- ---------- 已登录视图 ---------- -->
			<div class="login-info">
				<h3>账号状态</h3>
				<p>
					<b class="green">已登录</b>
					（
						<span>账号id=<t class="user-id"></t></span>，
						<span>昵称=<t class="user-username"></t></span>，
						<span>年龄=<t class="user-age"></t></span>，
						<span>登录次数=<t class="user-loginCount"></t></span>
					)
				</p>
				<h3>相关操作</h3>
				<p>
					<a href="javascript:location.href=baseUrl + '/sso/logout?satoken=' + localStorage.satoken + '&back=' + encodeURIComponent(location.href);">跳页面注销</a>
					<a href="javascript:logout();">使用Ajax调用API注销</a> 
				</p>
			</div>
			<!-- ---------- 未登录视图 ---------- -->
			<div class="un-login-info">
				<h3>账号状态</h3>
				<p>
					<b class="red">未登录</b>
				</p>
				<h3>相关操作</h3>
				<p>
					<a href="javascript:location.href='sso-login.html?back=' + encodeURIComponent(location.href);">直接登录</a>
					<a href="javascript:getCurrInfo();">使用Ajax调用API触发登录</a>
				</p>
			</div>
			<div style="height: 200px;"></div>
		</div>
		<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
		<script src="https://www.layuicdn.com/layer-v3.1.1/layer.js"></script>
		<script>window.jQuery || alert('当前页面CDN服务商已宕机，请将所有js包更换为本地依赖')</script>
		<script src="base-util.js"></script>
		<script type="text/javascript">
		
			// 显示当前系统域名 
			$('.client-domain').html(location.protocol + "//" + location.host);
		
			// 查询当前会话是否登录 
			function loadinfo() {
				sa.ajax('/getCurrInfo', {}, function(res) {
					if(res.code == 200) {
						$('.login-info').show();
						$('.un-login-info').hide();
						$('.user-id').text(res.data.id);
						$('.user-username').text(res.data.username);
						$('.user-age').text(res.data.age);
						$('.user-loginCount').text(res.data.loginCount);
					} else if(res.code == 401){
						$('.login-info').hide();
						$('.un-login-info').show();
					} else {
						layer.alert(res.msg, {icon: 2 }); 
					}
				})
			}
			$(function() {
				loadinfo();
			})
			
			// 调用API触发登录 
			function getCurrInfo() {
				sa.ajax('/getCurrInfo', {}, function(res) {
					// 根据返回的状态码执行不同动作
					if(res.code == 200) {
						layer.alert(res.msg);
					} else if (res.code == 401){
						layer.confirm('该数据仅对登录用户开放，现在就去登录？', function() {
							location.href = 'sso-login.html?back=' + encodeURIComponent(location.href);
						});
					} else {
						layer.alert(res.msg);
					}
				});
			}
			
			// 调用API进行注销 
			function logout() {
				sa.ajax('/sso/logout', {}, function(res) {
					// 根据返回的状态码执行不同动作
					if(res.code == 200) {
						layer.msg('注销成功');
						setTimeout(function() {
							location.reload(true);
						}, 800);
					} else {
						layer.alert(res.msg);
					}
				});
			}
			
		</script>
	</body>
</html>