SSO 前端设计与思路

什么是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
    }
  }

后台逻辑流程如下: