SSO 前端设计与思路

什么是sso？

单点登录(SingleSignOn，SSO)，就是通过用户的一次性鉴别登录。当用户在身份认证服务器上登录一次以后，即可获得访问单点登录系统中其他关联系统和应用软件的权限，同时这种实现是不需要管理员对用户的登录状态或其他信息进行修改的，这意味着在多个应用系统中，用户只需一次登录就可以访问所有相互信任的应用系统。这种方式减少了由登录产生的时间消耗，辅助了用户管理。

使用场景

1.系统一站式登陆，如果我在 a.jd.com 登陆之后, 我在 b.jd.com再次登陆时，无需继续登陆，达到全网漫游目的。 2. 禁用系统功能，例如我需要 剔除该用户时，此时只需要在单点服务上剔除改用户的权限，此时所有的应用权限都剔除了。

设计思路

流程图如下

统一登陆页面如下

代码逻辑如下

 methods: {
    handleLogin() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          Login({
            username: this.loginForm.name,
            password: this.loginForm.password,
            appName: this.appName
          }).then(res => {
            Cookies.set("Auth_token", res.data.token, { expires: 7 ,  path: '', domain: '.jd.com' });
            location.href = `http://` + this.redirect
          });
        } else {
          return false;
        }
      });
    }
  },
  created() {
    console.log(window.location)
    console.log(process.env)
    let query = parseQuery(window.location.search)
    console.log(query)
    if (query.redirect) {
      this.redirect = query.redirect
      this.appName = query.appName
    }
  }

tips: 在此方案中与原始端sso 登陆区别在于cookie 的设置问题，由于后台服务Session 储存在各端，此时无法进行数据session同步，所以，cookie的存储与设置, 都存放在客户端, 客户端同时调用时携带上cookie 中的token（或者说是ticket）提供给每个服务的后台，后台拿到此token时去SSO服务器做验签，并拿到该用户的用户信息，实现统一的登陆。 后台逻辑流程如下: 这里服务端在验签过程中可以加一层redis 优化，从sso端如果验证成功后可以存储一遍token，不需要频繁向sso端频繁验签名，如果对实时应用剔除较强的应用则不建议这样做。