以上，就是我了解的单点登录的给个模式及原理，下面给大家上实战代码，这里我列举两种情况，分类给大家讲解和提供我对应的demo（以下理论参考https://www.jb51.net/article/98228.htm）环境1:a.xxx.com需要跟b.xxx.com实现跨域,这种比较简单,只需要设置cookie的域名关联域就可以了 cookie.Domain = "xxx.com",这样两个域名间的cookie就可以互相访问,实现跨域.
demo地址展示：
vue具体代码：
先打入指令安装js-cookie
npm i js-cookie -S
然后写入登录页面
<template> <div> <h1>{{ msg }}</h1> <button @click="handleLogin">点击登录</button> <button @click="rethome">返回首页</button> </div> </template> <script> import Cookies from 'js-cookie' export default { name: 'home', data () { return { msg: '系统一登录页面' } }, methods: { handleLogin() { var token = this.randomString(); Cookies.set('app.token',token, { expires: 1000, path: 'https://www.jb51.net/', domain: '.**.com' })//这里换你的网站根目录 Cookies.set('app.loginname','系统一', { expires: 1000, path: 'https://www.jb51.net/', domain: '.**.com' })//这里换你的网站根目录 this.$router.push("https://www.jb51.net/"); }, rethome(){ this.$router.push("https://www.jb51.net/"); }, randomString(e) { e = e || 32; var t = "ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678", a = t.length, n = ""; for (var i = 0; i < e; i++) n += t.charAt(Math.floor(Math.random() * a)); return n } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
接下来是首页：
<template> <div> <h1>{{ msg }}</h1> <h3>用户信息为：{{token}}</h3> <h3>登录地点：{{loginname}}</h3> <button @click="logout">登出</button> </div> </template> <script> import Cookies from 'js-cookie' export default { name: 'home', data () { return { msg: '系统一主页面', token:'', loginname:'' } }, mounted(){ const token = Cookies.get('app.token'); this.token = token; const loginname = Cookies.get('app.loginname'); this.loginname = loginname; console.log(token); if(!token){ this.$router.push("/login"); } }, methods: { logout(){ Cookies.set('app.token','', { expires: 1000, path: 'https://www.jb51.net/', domain: '.**.com' })//这里换你的网站根目录 Cookies.set('app.loginname','', { expires: 1000, path: 'https://www.jb51.net/', domain: '.**.com' })//这里换你的网站根目录 this.$router.go(0) } } } </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> h1, h2 { font-weight: normal; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } </style>
系统二的对应页面也只是把这两个页面弄过去，改下文字方便识别而已。
写到这里，大家对于这个的思路已经比较清晰了，如果需要优化，我这边建议大家把判断和获取的方法统一弄成控件，然后在router里进行操作，这样会更好。
环境2:a.aaa.com需要跟b.bbb.com实现跨域,这种不同域名的情况下,想要实现就必须换种方式了.
这个我还没有写好demo，这个给大家提供我找到的最靠谱的思路及demo
在这里我将引入第三者,s.sss.com这个站点,就是某个浏览器同时打开了这3个站点,我们访问A站点,先判断自身是否登录,如果session为空,就重定向到S站点,判断S站点上面是否有cookie,如果S站点上面也没有cookie,则由S站点重定向到A站点的登录页.这样我们就实现了第一步,S站做的的就是隐藏在幕后,子站先判断自己是否存在session,如果不存在,就重定向到主站S上面去验证.第二步,验证登录信息合法性.这里我引入token(令牌),网上有很多资料,描述token的传递,工作方式是这样,A登录成功,保存自身的session,重定向到S,S在自己站点保存一个session跟cookie,session保存token对象{tokenID,userName,startTime,endTime},cookie保存tokenID,tokenID是一个Guid,把token对象缓存在集合里面,另起一个线程,根据endTime(过期时间)来定期清理集合列表,重定向到A的时候再将tokenID传递过去,拿到tokenID后,进入验证环节,S站有提供一个接口,根据tokenID获取token对象,如果获取到对象,且没有失效,则tokenID合法,跳入index页面.情况2,A登录,直接打开B,这时候B自身没有session,会主动请求主站,主站会返回cookieID(S站存在客户端的cookie),这个时候再走验证环节,如果通过,则B根据token对象创建自身的session,再跳入index.在这里整个单点登录就已经成功了,接下来附上流程图:
前面流程图,太丑了,这里补上一张,希望有所帮助.
