前端进阶：如何设计统一登录业务
前言
几乎所有的项目都需要登录，无论是权限限制、个性化定制、信息安全等需求，都要通过登录系统来获取用户信息，以便提供后续服务。
而一个公司可能会有多个不同的项目，每个项目后端都是共用同一套用户系统的话，就势必会有通用登录的需求出现。
通用登录的方式有很多种，下面我们仅探讨前端的实现方案。
项目子域名不同，共用一个父域
通过设置 cookie 的 domain 属性，可以使得 cookie 携带的内容在父子域名下共享。
根据这个特性，登录之后将 token 保存在 cookie 里面，所有子项目可以共享 token。
将登陆系统单独提出来做成一个单独的项目，其他所有的项目在未登录的情况下重定向到独立的登录系统，登录之后再根据来源跳转到对应的页面，简单的实现如下：
// 子项目在判断未登录的时候，跳转对应的登录项目并将当前的url作为参数带给登录系统 location.replace('https://login.abc.com?redirectUrl' + window.location.href) // 登录系统在登录之后，根据redirectUrl跳回对应的项目 location.replace(redirectUrl) 复制代码这种方式是最为简单的，并且由于登录是独立的项目，也可以将个性化的定制放到项目中，只需要在其他项目跳转的时候除了 redirectUrl 外，多附带项目类型参数（参数名随便取）就可以针对不同的子系统定制个性化的登录界面。
同域，但根据网关来区分项目
实现效果同上，但是由于是同域，所以可操作性的地方就更多，token 不仅仅限制于 cookie，任何本地存储的方式都可以使用，例如 sessionStorage、localStorage 等本地缓存都行。
一般使用此方式的都是 pc 端，定制化高，但是同时登录项目的资源会比较多，加载速度有影响。
NPM
将登录的组件、接口、逻辑全部打包成 npm 包，使用到的项目可以按需引入之后，调用统一的登录方式。
就跟写组件业务一样，把登录当成一个独立的业务组件来写，缺点是当登录业务升级的时候，所有有关的项目都需要重新构建、发布。
CDN SDK
上一篇的初级前端进阶里面有谈到过，sdk 的统一登录方案，这里就拿出来详细说下，顺便附带部分代码讲解。
其实总的来说，没啥难度，就是将整个登录业务封装一下，做的更为通用罢了。
首先，分析一下，登录业务需要拆分成如下 4 个部分：
登录 DOM 渲染
请求模块
登录使用到的事件模块
登录事件之后的回调（成功、失败等）
登录 DOM 渲染模块
预先将登录的静态 html 写好。然后将写好的模板以模板字符串保存，样式以内联样式写入。
this.domTpl = `<div style="position: fixed; top: 0; left: 0; background: #fff; width: 100%; height: 100%; z-index: 9999;font-family: 'PingFangSC-Regular'"> ${this.close ? `<div id="closeIcon" style="position: absolute; right: 10px; top: 10px"><p style="height: 20px; width: 20px;" >X</p></div>` : ''} ${this.imgUrl.loginImgStart ? `<div style="text-align: center; padding-top: 60px;"> <img src=${this.imgUrl.loginImgUrl} style="width: 36.6vw; height: 36.6vw" /> </div>` : ''} <div style="width: 78.6vw; margin: 0 auto; margin-top: 16px;"> <input id="phone" type="text" name="phone" placeholder="请输入手机号码" style="width: 100%;font-size: 16px; padding-top: 22px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); outline: none;border: none;border-bottom: 1px solid rgba(232,232,232,1);padding-bottom: 10px;" /> </div> <div style="width: 78.6vw; margin: 0 auto; display: flex;"> <input id="code" type="text" placeholder="请输入验证码" style="width: calc(100% - 94px); font-size: 16px; padding-top: 22px; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); outline: none;border: none;border-bottom: 1px solid rgba(232,232,232,1);padding-bottom: 10px;" /> <p style="width: 84px;border:1px solid rgba(42,112,254,1); font-size: 12px;padding: 5px 12px; text-align: center;margin: 20px 0 0px 0; color: #2A70FE;border-radius:8px;">获取验证码</p> </div> <div style="width: 78.6vw; margin: 0 auto;margin-top: 45px;position: relative;"> <div style="display: none; position: absolute; top: -24px; left: 0; right: 0; color: #FF495F; font-size: 12px; text-align: center; margin-bottom: 12px;">123</div> <p style="font-size: 17px;background:rgba(203,205,209,1);box-shadow:0px 1px 4px 0px rgba(82,88,102,0.2);border-radius:4px; text-align: center; font-family: 'PingFangSC-Regular';font-weight:400;color:rgba(255,255,255,1);line-height:40px;margin-block-start: 0;margin-block-end: 0;">登录</p> </div> ${this.agreement.start ? `<div style="width: 78.6vw; margin: 0 auto;margin-top: 12px;"> <div id="notes" style="display: flex;align-content: center;"> <i id="regulations" style="display: block;background: url(${this.regulations}); background-size: cover; width: 16px; height: 16px;margin-right: 5px;"></i> <p style="color: #7A8599;font-size: 12px;margin-block-start: 0;margin-block-end: 0;">已阅读并同意<a href=${this.agreement.serverUrl} style="color: #2A70FE;text-decoration:none;">《用户服务协议》</a>和<a href=${this.agreement.privacyUrl} style="color: #2A70FE;text-decoration:none;">《隐私政策》</a></p> </div> </div>` : ''} </div>`; 复制代码统一的登录界面，可以预先添加一些模块定制化，比如登录 logo，背景图片等，会更加通用一些。
另外为了保证 sdk 的体积与加载速度，尽可能的少用大图素材，小的素材直接 base64 引入，背景大图这种比较大的资源，采用 cdn 引入。
请求模块
为了保证较高的兼容性，以及 sdk 的大小，所以直接采用原生的 xhr 请求，不使用额外的 ajax 请求库与 fetch。
// 发送ajax请求 createXMLHttpRequest(url, errFun) { let xmlHttp = new XMLHttpRequest(); xmlHttp.open("POST", url, false); xmlHttp.setRequestHeader('content-type', 'application/json'); xmlHttp.send(this.paramsEven()); return xmlHttp.onreadystatechange = () => { if (xmlHttp.readyState === 4 && xmlHttp.status === 200) { let data = JSON.parse(xmlHttp.responseText); if (data.code !== 0) { return errFun(data.errMsg); } if (url === this.dataStorage.url) { this[`${this.dataStorage.storage}Even`](data.data.token); // 根据配置缓存方法，将缓存存到制定的位置 if (this.success) this.success(data.data.token); // 直接成功回调，把 token 传给调用者 } return data; } }; } 复制代码登录使用到的事件模块
需要内置的事件如下：
验证码发送
手机、账号、验证码校验
登录请求
页面关闭
提示交互
一些可选的额外功能（例如：是否需要勾选协议验证等）
// 登陆相关事件 bindAction() { // 手机号正则 let checkPhone = (phone) => { if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(phone))) { return false; } else { return true; } }; // 弹窗 let tipModel = { show: (tipFont) => { let tipModel = document.getElementsByClassName('tipModel')[0]; tipModel.innerHTML = tipFont; tipModel.style.display = 'block'; }, hide: () => { document.getElementsByClassName('tipModel')[0].style.display = 'none'; } }; // 验证码相关 let ObtainFun = () => { let ObtainStart = document.getElementsByClassName('ObtainStart')[0]; let time = 50; ObtainStart.innerHTML = `${time} S`; ObtainStart.style.borderColor = 'rgba(245,246,247,1)'; ObtainStart.style.background = 'rgba(245,246,247,1)'; time = time - 1; let interval = setInterval(() => { ObtainStart.innerHTML = `${time} S`; time = time - 1; if (time < 0) { ObtainStart.innerHTML = `获取验证码`; clearInterval(interval); document.getElementsByClassName('ObtainStart')[0].className = 'Obtain'; let Obtain = document.getElementsByClassName('Obtain')[0]; Obtain.style.borderColor = '#2A70FE'; Obtain.style.background = '#fff'; } }, 1000) }; // 验证码事件 document.getElementsByClassName('Obtain')[0].onclick = () => { let phone = document.getElementById('phone').value; if (!checkPhone(phone)) { tipModel.show('请输入正确的手机号码'); return false; } let dataInfo = {}; if (document.getElementsByClassName('Obtain')[0]) { dataInfo = this.createXMLHttpRequest(this.dataStorage.verifyCodeUrl, tipModel.show)(); } if (dataInfo.code === 0) { document.getElementsByClassName('Obtain')[0].className = 'ObtainStart'; ObtainFun(); } }; // closeIcon事件 if (this.close) { document.getElementById('closeIcon').onclick = () => { this.hide(); }; } // 判断验证码是否存在 document.getElementById('code').oninput = () => { let codeVal = document.getElementById('code').value; if (codeVal) { let loginButton = document.getElementsByClassName('loginButton')[0]; loginButton.style.background = '#3D424D'; loginButton.style.color = '#fff'; } }; // 登陆事件 document.getElementsByClassName('loginButton')[0].onclick = () => { if (!document.getElementById('phone').value || !document.getElementById('code').value) { return tipModel.show('请输入正确的手机号码和验证码'); } if (this.agreement.start && document.getElementById('regulations').style.backgroundImage !== `url("${this.regulationsStart}")`) { return tipModel.show('请阅读用户相关条例'); } this.createXMLHttpRequest(this.dataStorage.url, tipModel.show)(); }; // 用户条例事件 if (this.agreement.start) { document.getElementById('notes').addEventListener('click', () => { let regulations = document.getElementById('regulations'); let regulationsBackground = regulations.style.backgroundImage; if (regulationsBackground === `url("${this.regulations}")`) { regulations.style.backgroundImage = `url("${this.regulationsStart}")`; } else { regulations.style.backgroundImage = `url(${this.regulations})`; } }, false) } } 复制代码登录事件之后的回调（成功、失败等）
在初始化的时候，可以将需要的回调方法传入，再在对应的场景下，执行对应的回调事件。
如上，已经完成了一个简单、通用的登录 sdk，在项目中，直接引入即可：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no, shrink-to-fit=no,viewport-fit=cover"/> <title>登录</title> </head> <body style="margin: 0;"></body> <script type="text/javascript" src="./js/login.js"></script> <script> Login.init({ imgUrl: { loginImgStart: true, loginImgUrl: "https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/mirror-assets/168e088524247c4bcc7~tplv-t2oaga2asx-image.image", loginImgStyleWidth: "130px", loginImgStyleHeight: "130px" }, agreement: { start: true, serverUrl: '', privacyUrl: '' }, close: true, success() { console.log('success') }, error() { console.log('error') }, dataStorage: { path: 'https://login.com' } }) </script> </html> 复制代码效果如下：
如上，一个通用的登录 sdk 开发完毕，总体压缩之后的大小为 9kb 左右。如果感觉还不够的话，可以使用 es5 语法开发，体积可以再压缩一些。
可优化点
可以设置初始化 sdk 之后，自动、手动判断登录态，根据本身需进行登录业务处理
根据自身的项目需求，对通用的 sdk 进一步定制化
写在最后
上述是将登录业务剥离之后，独立开发、部署的一些简单的方案，如果有更好的方案或优化点，欢迎探讨。
作者：CookieBoty
链接：https://juejin.cn/post/6911124820587446280