Vue sso認證快速接入實踐

 

 

SSO原理

　　SSO（Single Sign On）單點登錄系統。現在很多系統都由多個子系統組成，爲了統一登錄，保證登錄一次，所有子系統都能訪問，提升用戶體驗，SSO方案由此而生。

　　SSO系統是單獨部署的一套認證系統，獨立於所有子系統，包含登錄認證、授權、用戶管理功能。用戶需要登錄任意業務子系統時，都被重定向到認證中心，通過認證中心登錄認證後，可以重定向到子系統。

　　簡單點說：有sso認證系統給子系統提供了身份認證的能力，子系統依賴sso的身份認證。

詳細瞭解：https://www.cnblogs.com/-wenli/p/12630442.html

 

快速接入方案

　　最近嘗試將一個前端系統快速接入公司的sso認證，方案如下：

 

 

 

實現

在vue router文件下：

注意點：

　　1、本地存儲一個token，用Cookies存儲，此本地token在sso認證的時候帶入至sso跳轉鏈接，認證成功後，回調鏈接帶回，可將本地token和認證後的token存儲；

　　2、這裏sso-localtoken爲本地token，access_token爲認證成功後存儲在後端的token；

　　3、認證成功後，處理回調後重定向到前端；

router.beforeEach((to, from, next) => {
              // 獲取本地token
              var islocaltoken =  VueCookies.isKey("sso-localtoken");
             
              // 判讀是否已登陸
              if (islocaltoken){
                  var localtoken = VueCookies.get("sso-localtoken");
                  // 獲取服務端存儲的身份認證的token
                  Getacctoken(localtoken).then(access_token=>{
                        // 如果本地token和身份認證的token匹配
                        if (access_token != ""){
                            //獲取用戶信息
                           　　GetUserInfo(access_token).then(userinfo=>{
　　　　　　　　　　　　　　　　　　　　
                            })
                            //如果本地token和身份認證的token不匹配
                          }else{
　　　　　　　　　　　　　　　　　　// 生成本地token，替換存儲本地token，跳轉sso認證；
                          }
                      }
                  );
                  // 繼續正常請求網頁
                  next()
              }else{
                    //生成本地token，存儲本地token，跳轉sso認證；
              }

});

//獲取服務端token
async function Getacctoken(localtoken){
     var url = "xxx?localtoken=" + localtoken;
     const response = await axios.get(url);
     return response.data
}

//獲取身份信息
async function GetUserInfo(access_token){
     var url = "xxx?access_token=" + access_token;
     const response = await axios.get(url);
     return response.data
}