最近在开发管理系统的时候，因为增加了单点登录，所以在开发过程中遇到了一些小麻烦。之后解决了这个问题的同时，也把其中的过程记录了下来，感觉这个过程很有意思，就打算把它分享给大家。

首先，先简单介绍一下什么是 单点登录。

单点登录

单点登录，Single Sign On 简称为 SSO，是目前比较流行的企业业务整合的解决方案之一。它的定义是在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

综上所述，我理解的单点登录是，现在有很多管理系统。每个系统有自己的账户体系，管理系统与管理系统之间相对独立，如果一位运营人员要同时操作多个系统的话，避免不了每个系统都要自己登陆一遍。现在有了单点登录，相当于设置一个大的管理平台，将这些管理系统都放在这个平台内，由这个平台一个账户作为所有管理系统的账户标识，大部分单点登录做法是将账户标识存在浏览器 cookie 内。这样做方便了运营人员不用每个系统都要登录一遍，也方便了程序员之后再次开发类似的管理系统的话，不用再做登录、账户管理等功能了。

目前我们公司也是这样做的，但在多次维护其中的管理系统的时候遇到了一个大问题：登录

发现问题

上面介绍到开发新的管理系统时，我们不需要再做登录功能了，那么从这里开始我们的登录状态都需要单点登录来模拟登录。以下我列举两个办法。

一、本地开发的时候创建一个临时登录页面，调用单点登录接口，将返回的登录标识存在浏览器cookie，然后跳到我们指定的管理系统首页，完成登录操作。也就是说这还是在本地写了一遍登录，跟以前的区别就是不用在意登录页的样式而已，依然要维护这个登录页。FAIL

二、登录操作用测试线或者生产线进行登录，然后将登录标识 cookie 复制到本地完成模拟登录。听起来比第一个办法要减少很多代码量，但是我实际上增加了很多人工操作。如果我先打开本地首页地址比如 http://localhost:8080 跳转到首页，这时首页会请求接口，发现你的登录标识cookie不对或者没有，就会立马跳转到登录页面。但是我本地没有登录页。所以我需要在本地先把跳转到登录页面的逻辑删掉或者debugger。再将复制过来的登录标识cookie粘贴到该域名下的cookies里，然后刷新或者继续执行。在开发中如果登录状态失效，我需要再重复一遍刚才的操作，想想都可怕。FAIL

分析问题

问题已经很清楚了，我们在想办法之前，把问题拆分一下。

不想本地再写一遍登录页面

不想手动复制cookie

不想本地开发新增模拟登录代码逻辑

解决跨域cookie传递问题

接下来，我分享一下用chrome插件来解决以上问题。

解决问题

先看一个动图演示

描述一下我上面的操作过程，我登录到服务器上的 sso 系统，然后正常点击跳转到其中一个管理系统内。这里登录账户信息是由 cookie 来判断的。然后我在本地开启了一个该管理系统的服务然后跳转到我本地的服务地址 http://localhost:7878 因为我本地在该域名地址下并没有登录，自然而然没有账户 cookie，所以会出现 获取不到登录信息，请登录 的提示消息。我第二遍操作的时候，我使用 chrome 插件，该插件的作用是将当前地址cookies复制到输入框内的地址，然后实现我想要在本地开发时账户登录效果。

这种解决方案对于开发者来说最大的好处是，不需要在管理系统内编写多余的代码

接着说一下 chrome 插件。

chrome插件

这里我并不会讲 chrome 插件该如何编写，编写 chrome 插件的教程网上有很多，并且它并不难。

说一下我的思路和运用到的 chrome api

获取当前浏览器地址 chrome.tabs.getSelected

根据当前地址获取cookies chrome.cookies.getAll

将cookie插入指定的地址 chrome.cookies.set

创建一个新的窗口 chrome.tabs.create

插件源码地址在文章末尾处。在本地测试的时候可以打开 Chrome 浏览器，输入 chrome://extensions 打开扩展程序，点击加载已解压的扩展程序就可以了，或者点击打包扩展程序，然后将 .crx 文件拖入扩展程序中。

结语

在最终确定使用 chrome 插件之前，我尝试了很多方案。比如 iframe、postMessage 等，因为代码编写较多、逻辑较复杂，所以这些方案并没有参考价值，也不符合我们的最终要求，也就不做讲解了。如果你有相对更好的方案或者你使用 chrome 插件同样解决了哪些问题，不妨留言一起分享讨论。欢迎扫码关注微信公众号「不可思议的前端」，每个月会技术干货、最佳实践以及有趣的前端技巧分享给大家。

插件源码