oidc-client实现单点登录SSO

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

  在最近的一次项目应用中，碰到这个需求，随即问了一下度娘，得到答案，话不多说，上干货。

  项目本身是基于Vue + ElementUI架构，简单的项目结构如下：

  ---sso-project:

  ----src

  -------main.js

  ------- router.js

  -------store

  -------views

  --------login

 ----------index.vue

 --------ssoLogin

 ----------index.vue  

  整个逻辑如下：

  为了兼容性处理，在全局的路由处理中，我们做一下处理，涉及文件main.js

  划重点： oidc-client可以通过静态引入放在index.html的script也可以通过Import方式，以静态因如为例

  const Oidc = window.Oidc

  router.beforeEach((to, from, next)=>{

    if(!token) {

      if(to.path === '/login' || to.path === '/ssoLogin' ) {

        next()

        return

      }

       const mgr = new Oidc.UserManager({         

　　　  authority: 'xxxx', //授权中心，需要对接相应的公司的IT安全童鞋              

             client_id: 'xxx', //项目的id需要后端配置

             redirect_uri: 'xxx'  // sso授权成功之后的跳转路由，在这个路由，我们需要做重定向处理

             response_type: 'id_token', 

             scope: 'openid_profile'

       })

       mgr.signinRedirect() //执行重定向

   }

   else {

     next()

   }

 })

分割线-----------------------------------------------------------------------------

ssoLogin.vue中需要对重定向处理

mounted事件中，通过路由的query接受授权的状态和token

mounted（）{

   const query = this.$router.query

   if(query.code === 0) {  // 返回成功

    save(query.token) //根据实际业务，存取token

    this.$router.push('/yourpath') //需要重定向的路由

   } else {

    this.$router.push('/login') //到登录页

   }

}

流程完毕

不小心踩得坑： 路由守卫拦截的时候，不能拦截回调的路由ssoLogin，死循环妥妥的

  SSO依赖包，参考oidc-client-js