vue多系统单点登录,vue sso单点登录实例
最近项目停工，对RageFrame的研究暂时告一段落。本文将分享单点登录的相关知识，并提供一些演示供大家参考。有兴趣实现vue单点登录的朋友来看看吧。
最近项目停工，对RageFrame的研究暂时告一段落。本文将分享单点登录的相关知识，并提供一些演示供大家参考。希望对想了解的朋友有帮助。
话不多说，先说原则(参考地址：https://www.jianshu.com/p/613e44d4a464)
简单来说，SSO(Single Sign On)就是在多系统共存的环境下，用户在一个地方登录后，不必再登录其他系统，即一个用户登录一次就可以获得其他所有系统的信任。单点登录常用于大型网站，如阿里巴巴，网站背后有数百个子系统。一个用户的操作或交易可能涉及几十个子系统的协作。如果每个子系统都需要用户认证，不仅用户会抓狂，子系统也会为这种重复认证授权的逻辑抓狂。实现单点登录说到底就是要解决如何产生和存储那个信任，然后其他系统如何验证这个信任的有效性。因此，要点如下：
存储信任
验证信任
如果一个系统达到了开头提到的效果，即使是单点登录，也有不同的方式实现单点登录。这篇文章列出了我在发展中遇到的方法。
方法一：以Cookie作为凭证媒介
实现单点登录最简单的方法是使用cookie作为存储用户凭证的媒介。
用户登录到父应用程序后，应用程序返回一个加密的cookie。当用户访问子应用程序时，会携带cookie，应用程序被授权解密cookie并验证它。如果验证通过，用户登录到当前用户。
通过cookie进行授权
不难发现，上述方法在客户端的Cookie中存储了信任。这种方法很容易受到质疑：
Cookie是不安全。
不能跨域访问豁免。
对于第一个问题，可以通过加密Cookie来保证安全性，前提是不泄露源代码。如果cookies的加密算法泄露，攻击者可以通过伪造cookies来伪造特定用户的身份，这是非常危险的。
对于第二个问题，就更难了。
方法二：通过JSONP实现
对于跨域问题，可以使用JSONP。
用户登录到父应用程序后，与会话匹配的Cookie将存储在客户端。当用户需要登录子应用时，授权应用访问父应用提供的JSONP接口，在请求中取父应用域名下的Cookie。父应用程序接收请求，验证用户的登录状态，并返回加密信息。子应用程序通过分析返回的加密信息来验证用户，如果通过验证，则登录。
AuthJSONP可以解决跨域问题，但安全性类似于在Cookie中存储信任。一旦加密算法泄露，攻击者可以设置一个带有登录接口的本地伪父应用，通过绑定主机将子应用发起的请求指向本地伪父应用，并做出响应。
因为攻击者完全可以根据加密算法伪造响应请求，收到这个响应后，子应用就可以通过验证，登录到特定用户。
方法三：页面重定向的方式。最后一种引入方式是在来回重定向中与父应用和子应用进行通信，从而实现信息的安全传输。
父应用程序提供了一个GET login接口，用户通过子应用程序的重定向连接访问这个接口。如果用户尚未登录，将返回一个新的登录页面，用户将输入帐户密码进行登录。如果用户已经登录，则生成加密令牌并将其重定向到由子应用程序提供的令牌验证接口。在解密和验证之后，子应用程序登录到当前用户。
相比前两种方法，auth redirect解决了上述两种方法暴露出的安全问题和跨域问题，但不如前两种方便。
安全和便捷本来就是一对矛盾。
方法四：使用独立登录系统。一般来说，大型应用会将授权逻辑和用户信息的相关逻辑分离到一个应用中，称为用户中心。
用户中心不处理业务逻辑，只处理用户信息的管理和对第三方应用的授权。当第三方应用需要登录时，用户的登录请求被转发到用户中心进行处理，用户处理后返回凭证。第三方应用验证凭证，通过后登录。
以上是单点登录的模式和原理，我是知道的。这里，我给你实际的代码。这里我列举两种情况来说明，并提供我相应的demo(以下理论参考https://www.jb51.net/article/98228.htm)环境1:a.xxx.com需要和a.xxx.com跨域，比较简单。您只需要设置与cookie相关联的域。饼干。Domain=xxx.com ，这样两个域名之间的cookies就可以互相访问，跨域。
演示地址显示：
系统1: sso1.linheng.xyz
第二个系统：sso2.linheng.xyz
Vue特定代码：
首先输入安装js-cookie的指令。
npm i js-cookie -S
然后写到登录页面。
模板
你好
h1{{ msg }}/h1
Button @click=handleLogin 点击登录/button
按钮@click=rethome 返回主页/按钮
/div
/模板
脚本
从“js-cookie”导入cookie
导出默认值{
姓名：家，
data () {
返回{
消息：“系统一的登录页面”
}
},
方法：{
handleLogin() {
var token=this . randomstring()；
Cookies.set (app.token ，令牌，{expires: 1000，路径：/，域：。* *.com })//在此处更改您的网站根目录
Cookies.set(app.loginname ， system one ，{expires: 1000，路径：/，域：。* *.com })//在此处更改您的网站根目录。
这个。$ router . push(/)；
},
rethome(){
这个。$ router . push(/)；
},
randomString(e)
e=e 32
var t= abcdefghjkmnpqrstwyzabcdefhijkmnprstwxyz 2345678 ，
a=t .长度，
n=“”；
for(var I=0；即：I)n=t . charat(math . floor(math . random()* a))；
返回
}
}
}
/脚本
！-添加“scoped”属性以将CSS仅限制到此组件-
样式范围
h1，h2 {
字体粗细：正常；
}
ul {
list-style-type:无；
填充：0；
}
李{
显示：内嵌-块；
边距：0 10px
}
一个{
颜色：# 42b983
}
/风格
接下来是主页：
模板
你好
h1{{ msg }}/h1
H3用户信息是：{{token}}/h3
H3登录位置：{ {登录名}}/h3
Button @click=logout 注销/button
/div
/模板
脚本
从“js-cookie”导入cookie
导出默认值{
姓名：家，
data () {
返回{
消息：“系统一主页”，
令牌：，
登录名：“”
}
},
已安装(){
const token=cookies . get( app . token )；
this.token=token
const loginname=cookies . get( app . loginname )；
this.loginname=loginname
console.log(令牌)；
如果(！令牌){
这个。$ router . push(/log in )；
}
},
方法：{
注销(){
Cookies.set (app.token ，，{expires: 1000，路径：/，域：。* *.com })//在此处更改您的网站根目录
Cookies.set (app.loginname ，，{expires: 1000，路径：/，域：。* *.com })//在此处更改您的网站根目录
这个。$router.go(0)
}
}
}
/脚本
！-添加“scoped”属性以将CSS仅限制到此组件-
样式范围
h1，h2 {
字体粗细：正常；
}
ul {
list-style-type:无；
填充：0；
}
李{
显示：内嵌-块；
边距：0 10px
}
一个{
颜色：# 42b983
}
/风格
第二个系统对应的页面，只是把这两个页面拿过去，把文字改一下，方便识别。
写到这里，大家对此的思考已经比较清晰了。如果需要优化，我建议你把判断和获取的方法统一成控件，然后在路由器里操作，会更好。
在这里，分享我的密封控制演示。点击此处查看文章。
2.环境：A.AAA.com需要与b.bbb.com实现跨域。在这种不同域名的情况下，它必须以另一种方式实现。
我还没有写演示，这将为您提供我所发现的最可靠的想法和演示。
在这里，我将介绍第三方，s.sss.com，这意味着一个浏览器同时打开了这三个网站。我们在访问A站点的时候，首先会判断自己是否登录。如果会话为空，我们将被重定向到站点S，以判断站点S上是否有cookie。如果站点S上没有cookie，我们将被从站点S重定向到站点a的登录页面。这样，我们就完成了第一步。S站做的就是躲在幕后。子站首先判断是否有会话，如果没有会话，则重定向到主站S进行验证。第二步，验证登录信息的合法性。这里我介绍一下token(令牌)，网上有很多资料描述token的传递。工作方式如下：A成功登录，保存自己的会话，重定向到S，S保存一个会话和cookie，会话自己的站点。会话保存令牌对象{令牌id，用户名，开始时间，结束时间}。Cookie tokenID，tokenID，这是一个Guid。缓存集合中的令牌对象，并启动另一个线程。根据endTime定时清理集合列表，然后重定向到a时传递tokenID，获取tokenID后，进入验证流程。工作站S具有根据令牌ID获取令牌对象的接口。如果对象被获取并且不是无效的，则tokenID是合法的，并跳转到索引页面。案例二，A登录直接打开B，此时B没有自己的会话，所以会主动请求主站，主站返回CookieID(客户端的cookie存在于S站)。此时，它将经历验证过程。如果通过，B会根据令牌对象创建自己的会话，然后跳转到索引中。在这里，整个单点登录是成功的。接下来，附上流程图：
前面的流程图太难看了。这里补充一下。希望有帮助。
收集演示源代码：SSO单点登录描述：创建两个新站点xxx-xxx.com(主站)和yyy-yyy.com(副站)，修改hosts文件，将两个域名都指向127.0.0.1。
如果对你有帮助，欢迎关注。我会定期更新技术文档，大家可以一起讨论学习，共同进步。
这就是这篇关于vue单点登录的N种方式的文章。有关vue单点登录的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。