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