前后端分离模式下接入SSO的示例

2026-02-27 16:50:24 +08:00 · 2021-08-16 19:20:44 +08:00
parent 1644a1c5f3
commit 798a5548f9
9 changed files with 356 additions and 4 deletions
--- a/sa-token-doc/doc/sso/sso-cd.md
+++ b/sa-token-doc/doc/sso/sso-cd.md
@@ -118,7 +118,112 @@ public SaResult ss(String name, String pwd) {
 答：直接在前端更改点击按钮时 Ajax 的请求地址即可 


-### 三、常见疑问
+### 三、前后端分离架构下的整合方案
+
+如果我们已有的系统是前后端分离模式，我们显然不能为了接入SSO而改造系统的基础架构，官方仓库的示例采用的是前后端一体方案，要将其改造为前后台分离架构模式非常简单
+
+以`sa-token-demo-sso2-client`为例：
+
+##### 3.1、新建`H5Controller`开放接口
+``` java
+/**
+ * 前后台分离架构下集成SSO所需的代码 
+ */
+@RestController
+public class H5Controller {
+
+	// 当前是否登录 
+	@RequestMapping("/isLogin")
+	public Object isLogin() {
+		return SaResult.data(StpUtil.isLogin());
+	}
+	
+	// 返回SSO认证中心登录地址 
+	@RequestMapping("/getSsoAuthUrl")
+	public SaResult getSsoAuthUrl(String clientLoginUrl) {
+		String serverAuthUrl = SaSsoUtil.buildServerAuthUrl(clientLoginUrl, "");
+		return SaResult.data(serverAuthUrl);
+	}
+	
+	// 根据ticket进行登录 
+	@RequestMapping("/doLoginByTicket")
+	public SaResult doLoginByTicket(String ticket) {
+		Object loginId = SaSsoUtil.checkTicket(ticket);
+		if(loginId != null) {
+			StpUtil.login(loginId);
+			return SaResult.data(StpUtil.getTokenValue());
+		}
+		return SaResult.error("无效ticket：" + ticket); 
+	}
+
+	// 全局异常拦截 
+	@ExceptionHandler
+	public SaResult handlerException(Exception e) {
+		e.printStackTrace(); 
+		return SaResult.error(e.getMessage());
+	}
+	
+}
+```
+
+##### 3.2、增加跨域过滤器`CorsFilter.java`
+源码详见：[CorsFilter.java](https://gitee.com/dromara/sa-token/tree/master/sa-token-demo/sa-token-demo-sso2-client/src/main/java/com/pj/h5/CorsFilter.java)，
+将其复制到项目中即可 
+
+##### 3.3、新建前端项目 
+任意文件夹新建前端项目：`sa-token-demo-sso2-client-h5`，在根目录添加测试文件：`index.html`
+``` xml
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="utf-8">
+		<title>Sa-Token-SSO-Client端-测试页（前后端分离版）</title>
+	</head>
+	<body>
+		<h2>Sa-Token SSO-Client 应用端（前后端分离版）</h2>
+		<p>当前是否登录：<b class="is-login"></b></p>
+		<p>
+			<a href="javascript:location.href='sso-login.html?back=' + encodeURIComponent(location.href);">登录</a>
+			<a href="javascript:location.href=baseUrl + '/sso/logout?satoken=' + localStorage.satoken + '&back=' + encodeURIComponent(location.href);">注销</a>
+		</p>
+		<script src="https://unpkg.zhimg.com/jquery@3.4.1/dist/jquery.min.js"></script>
+		<script type="text/javascript">
+		
+			// 后端接口地址 
+			var baseUrl = "http://sa-sso-client1.com:9001";
+				
+			// 查询当前会话是否登录 
+			$.ajax({
+				url: baseUrl + '/isLogin',
+				type: "post", 
+				dataType: 'json',
+				headers: {
+					"X-Requested-With": "XMLHttpRequest",
+					"satoken": localStorage.getItem("satoken")
+				},
+				success: function(res){
+					$('.is-login').html(res.data + '');
+				},
+				error: function(xhr, type, errorThrown){
+					return alert("异常：" + JSON.stringify(xhr));
+				}
+			});
+			
+		</script>
+	</body>
+</html>
+```
+
+##### 3.4、添加登录处理文件`sso-login.html`
+源码详见：[sso-login.html](https://gitee.com/dromara/sa-token/tree/master/sa-token-demo/sa-token-demo-sso2-client-h5/sso-login.html)，
+将其复制到项目中即可，与`index.html`一样放在根目录下 
+
+
+##### 3.5、测试 
+先启动Server服务端与Client服务端，再随便找个能预览html的工具打开前端项目（比如[HBuilderX](https://www.dcloud.io/hbuilderx.html)），测试流程与一体版一致 
+
+
+### 四、常见疑问

 ##### 问：在模式一与模式二中，Client端 必须通过 Alone-Redis 插件来访问Redis吗？

--- a/sa-token-doc/doc/sso/sso-type3.md
+++ b/sa-token-doc/doc/sso/sso-type3.md
@@ -116,7 +116,7 @@ public Object myinfo() {
 }
 ```

-访问测试：[http://sa-sso-client2.com:9001/sso/myinfo](http://sa-sso-client2.com:9001/sso/myinfo)
+访问测试：[http://sa-sso-client1.com:9001/sso/myinfo](http://sa-sso-client1.com:9001/sso/myinfo)