单点登录

什么是单点登录

单点登录英文全称Single Sign On，简称就是SSO。它的解释是： 在多个应用系统中，只需要登录一次，就可以访问其他相互信任的应用系统。

单点登录可分为两种：
一、同主域名登录；
二、不同主域名登录。

同主域名登录

同主域名登录应用场景在ToC网站比较场景，比如百度、淘宝，这些都是用域名进行访问。

在百度系列网站，比如百度首页、知道、贴吧、文库等，我们发现只要在其中一个站点登录过，其他站点都是登录状态。其域名特点是主域名相同，都是“baidu.com”。其原理是通过可以共享主域名的cookie共享的登录状态，即百度下所有站点都能获取或者设置domain为“baidu.com”下的cookie，从而拿到用户的uid及token。
浏览器并没有提供cookie类似操作storage的API，需要自己封装。

// 对cookie的用法进行封装
const cookie = {
  // 设置cookie
  setCookie: function (name, value, exdays, path, domain) {
    var stExdays = ''
    var stDomain = ''
    if (exdays) {
      var date = new Date()
      date.setTime(date.getTime() + (exdays * 24 * 60 * 60 * 1000) + (8 * 60 * 60 * 1000))
      stExdays = ';expires=' + date.toUTCString()
    }
    if (domain) {
      stDomain = ';domain=' + domain
    }
    window.document.cookie = name + '=' + value + stExdays + ';path=' + path + stDomain
  },
  // 获取cookie
  getCookie: function (name) {
    var cookieName = name + '='
    var arr = document.cookie.split(';')
    for (var i = 0; i < arr.length; i++) {
      var item = arr[i]
      while (item.charAt(0) === ' ') item = item.substring(1)
      if (item.indexOf(cookieName) !== -1) {
        return item.substring(cookieName.length, item.length)
      }
    }
    return ''
  },
  // 清除cookie
  clearCookie: function (name, domain) {
    var date = new Date()
    date.setTime(date.getTime() - 10000)
    var cookieValue = this.getCookie(name)
    var stDomain = ''
    if (domain) {
      stDomain = ';domain=' + domain
    }
    if (cookieValue !== null) {
      document.cookie = name + '=' + ' ' + ';expires=' + date.toGMTString() + ';path=/' + stDomain
    } else {
      alert(name + '的值为空！')
    }
  }
}
export default cookie

读写主域名下cookie

cookie.setCookie('token', 'accessToken', 7, '/', 'baidu.com')
cookie.getCookie('token')

如下图：

image.png

如上所述即可共享登录状态。需要注意的一点是，此方法是通过域名进行登录，在开发过程中，我们往往用的是ip，且端口号不是80，与线上环境不同，所以需要对本地环境进行一些配置，包括域名映射、反向代理，用来模拟正式运行环境，否则开发环境反而无法登录。

反向代理

首先，修改本机hosts文件，将域名映射至本机ip，如

127.0.0.1 www.baidu.com
127.0.0.1 zhidao.baidu.com

然后设置代理服务器。
代理服务器可用：
1、nginx搭建代理服务，参考资料：https://www.jianshu.com/p/0ec27ef849f4
2、Apache搭建代理服务，参考资料：https://www.jianshu.com/p/02096442ecbf
3、node.js搭建代理服务，参考资料：https://www.jianshu.com/p/89c18b9eaad5

最后，启动代理服务，就可以按照线上访问域名的方式访问本地项目，在本地启动多个项目，模拟同域名单点登录。

不同主域名单点登录

不同主域名单点登录传递用户登录状态，只能通过路由跳转时在url上携带参数的方式进行登录状态的传递。如下图：