单点登录配置

简单说一下实现单点登陆的方式。

第一： 使用cookie来做。拿到后端返回的cookies凭证，每次请求带上。比较常用的方式。

缺点有2个：安全性不高，cookies容易被人窃取。另一个就是不能跨域

第二：使用token，返回一个新的token来验证。后端返回一个token验证，请求的时候带上。缺点就是万一加密验证被获取了，也容易被人攻击。

第三：就是页面跳转。后端返回一个加密的token，跳转到子应用。缺点就是需要跳转，用户体验稍微差点。

我们采取一个比较特殊的方式，在react项目中，iframe上面使用postMessage去完成请求拿到token完成单点登陆。

直接贴代码了。

发送请求

const sendMessage = (frameId, originSrc, message) => {

let sendData = {

data: message,

i_token:window.localStorage.getItem(‘kp.token’)

};

let id = frameId ||0;

window.frames[id].postMessage(JSON.stringify(sendData), originSrc);

}

监听并且回复请求

const listenMessage = (source, message) => {
window.addEventListener(‘message’,function(event){
if (event.origin !== source)
return;
let data = {
msg: message,
i_token:window.localStorage.getItem(‘kp.token’)
}
event.source.postMessage(JSON.stringify(data), event.origin);
},false);
}
postMessage 并且不像http请求一样可以监听，所以不同类型的文件传输方式都没有经过检验，看文档上面目前只允许字符串类型。

---

前端单点登录原理：
1.SSO一般都需要一个独立的认证中心（passport），
2.子系统的登录均得通过passport，子系统本身将不参与登录操作，
3.当一个系统成功登录以后，passport将会颁发一个令牌给各个子系统，子系统可以拿着令牌会获取各自的受保护资源，
4.为了减少频繁认证，各个子系统在被passport授权以后，会建立一个局部会话，在一定时间内可以无需再次向passport发起认证。

存储token
cookie方式：setCookie设置顶级域名
localStorage方式：postmessage
接受：
window.addEventListener(“message”, (event)=>{
var origin = event.origin;
// 通常，onmessage()事件处理程序应当首先检测其中的origin属性，忽略来自未知源的消息
if (origin !== “http://example.org:8080”)
return;
// …
}, false);
vue localstorage跨域实现参考

如何实现SSO单点登录？
不同域名如何实现单点登录？比如：
天猫：www.tmall.com
淘宝: www.taobao.com
实现方式一：父域名cookie domain属性，必须blog.a.com. news.a.com 这种二级域名
实现方式二：认证中心CAS太麻烦
CAS（单点登录）
现象：多个系统只需登录一次，无需重复登录
原理：授权服务器，被授权客户端
1、授权服务器（一个）保存了全局的一份session，客户端（多个）各自保存自己的session
2、客户端登录时判断自己的session是否已登录，若未登录，则（告诉浏览器）重定向到授权服务器（参数带上自己的地址，用于回调）
3、授权服务器判断全局的session是否已登录，若未登录则定向到登录页面，提示用户登录，登录成功后，授权服务器重定向到客户端（参数带上ticket【一个凭证号】）,设置过期时间，可以存到redis里
4、客户端收到ticket后，请求服务器获取用户信息，从redis里查询到相应的session
5、授权服务器同意客户端授权后，服务端保存用户信息至全局session，客户端将用户信息保存至本地session

实现方式三： local storage 跨域iframe+postMessage

低代码平台单点登录配置：
1.新增5个文件
utils/auth.js. utils/sso.js. utils/store.js.
premission.js.
api/login.js
其他修改如下：

2.具体修改内容截图
2.1 login.js

2.2 UserMenu.vue


2.3 router.config.js


2.4 user.js

2.5 auth.js

2.6 request.js

2.7 sso.js

2.8 store.js

2.9 premission.js

2.10 .env.development

2.11 vue.config.js

单点登录成功，获取到code和status
autologin
退出时，把code码带给后端