前端单点登录(SSO)

单点登录的理解：

单点登录（SSO）是整合企业系统的解决方案之一，旨在多个应用系统中，用户只需要登录一次就可以访问所有相互信任的应用系统。

要实现单点登录，就需要先了解域名之间的关系和格式，域名分为顶级域名（也称主域名和一级域名）、二级域名、三级域名等。

顶级域名：cnblogs.com

二级域名：i.cnblogs.com

三级域名：aa.i.cnblogs.com

单点登录流程（拿VUE项目做案例）：

我们登录成功后，后台会返回一个token给我们，我们需要把它存到Cookie里面，方便后面使用。然后请求接口的时候，会在接口带一个token过去给服务器，做为验证当前系统是否已经登录，或者登录过期的依据。

vue请求页面接口的时候，做一个请求拦截，如果在Cookie里面有token，则直接请求数据，正常进入页面；如果没有token，说明项目没有登录，则控制路由跳转去登录页面。

所以只要在不同级别的域名下，获取保存在Cookie里面的token就可以了，只要在设置cookie的时候把domain设置为主域名，就可以在其他二级、三级域名下找到token，这就是主要流程了。

单点登录的实现代码：

/**
   * Cookies.set传三个值，第一个是cookie的名称，第二个是设置token，第三个是路劲和cookie的域名
*/
Cookies.set(
   "name", //  设置cookie的名称
   "value",  //  设置token
   {
     path: "/",　//   这里不能把/去掉，否则会出现bug，可能导致找不到domain
     domain: "cnblogs"  //  设置主域名（关键点）
   }
)

退出登录的时候，把设置的这个Cookie清除就可以了：

Cookies.set(
   "name", //  清除的cookie的名称
   null,
   {
     expires: -1,  //  有效期设置负数，cookie会自动清空
     path: "/",
     domain: "cnblogs"  //  主域名
   }
)

OK，到这里单点登录就完成了。

 

版权声明：本文为博主原创文章，转载需注明出处。https://www.cnblogs.com/silent007/p/15207581.html

***************************************    END   ***************************************