背景
在我们的前端项目开发开发过程，页面搭建和交互开发以及接口对接的工作是先行的，而用户体系和注册登录需要后期对接统一的登录认证平台。初期搭建页面和业务逻辑开发的时候不涉及到用户信息，但是到对接接口的阶段开始需要使用token去获取用户信息。
而彼时，登录认证的对接工作还没有开启，所以只能通过公共的登录页面完成用户登录操作，从localstorage中拿到token字段，再注入到我们开发的项目地址对应的localstorage中。然后我们正在开发的项目就可以实现从localstorage获取token写入header指定的认证字段，实现通过后端接口的用户信息校验。
还有一种常见的情况是，项目登录对接地址和登录成功的回调地址都是线上环境，但是我们平时开发使用的是本地locahost环境，所以无法通过正常的登录授权处理逻辑获取token。
问题在于这个过程机械且耗时，而且一旦token失效，需要重新登录，反复执行这些操作步骤。
创意
如果我能把token读取和发送的过程自动化，是不是能够节省很多时间？
思路
通过系统级的应用控制
比如Alfred，可以使用workflow功能实现很复杂的操作逻辑。但是实际调研发现，无法对chrome浏览器进行深入控制。一是权限问题，二是操作复杂，而且利用系统级命令，好多chrome的能力无法使用。
chrome扩展程序
很早的时候我就接触过chrome扩展，那时更多的是作为使用者，比如：知乎自动跳转链接、百度文库下载、百度云文件下载、百度搜索去广告等等。期间也自己尝试开发过，但是由于适用场景比较单一，更适合自用。所以并未上传发布，而是采用文件夹或者zip压缩包方式直接本地安装。
不过，在使用的过程中，多多少少还是了解到一些扩展程序的强大能力的。我相信，chrome扩展会是一个不错思路，应该能够提供解决方案。
经过调研，最终确定chrome扩展的执行逻辑：
-
读取当前页面的localstorage；
-
检查localstorage是否包含token字段；
- 不包含则弹窗提醒；
- 包含则读取token并使用chrome.storage.local进行存储；
-
然后通过tabs权限遍历查找目标页面（比如我们开发时使用地址localhost:8080）；
- 查找不到目标页面则弹窗提醒；
- 查找到目标页面则读取chrome.storage.local存储的token；
-
将读取到的token写入目标页面的localstorage中；
-
刷新当前页面，token将会被在调用接口时被传入header中指定的认证字段；
-
完成！
总结
-
涉及到的权限要合理使用，不然可能需要处理各种复杂的情况；
-
要能够定义目标路径进行，支持模糊匹配；
-
实际执行过程中，需要处理好各种意外情况；
截止到目前Send token已在Google Chrome扩展商店发布上线，有兴趣的可以自主搜索Sendtoken下载安装。
PS：如果有需要补充的内容，请在评论区留言
转载时请注明"来自掘金 - EvenZhu"