前言:

由于業(yè)務(wù)需求，之前實現(xiàn)的單點登錄。是我們自己開發(fā)的一個鑒權(quán)系統(tǒng)。實現(xiàn)過程從0-1都是我們自己去設(shè)計。（我們就叫外部模式吧）

現(xiàn)在有個需求就是我們的系統(tǒng)要集成已有第三方的單點登錄。既集團(tuán)4a集成。

現(xiàn)在的需求是這樣的，能夠最小化配置，能夠兼容外部模式，也能夠兼容4a模式，然后通過一個配置。打包，可以將這兩種都區(qū)分開來，并且都可以正常運行。如果是部署自研鑒權(quán)系統(tǒng)方案的時候，則關(guān)于集成第三方相關(guān)的代碼不打包進(jìn)來。反之部署集成第三方代碼也是同樣的道理。

實現(xiàn)思路

通過node.js在編譯的時候進(jìn)對入口文件進(jìn)行文件的替換。（這個入口文件就是單點登錄邏輯。是一個js文件）,得益于vue3中的compostion-api方式。所以可以將一些邏輯封裝成compostion-api方式

image.png

image.png

所以我們在env-config.js中配置好登錄模式以及跳轉(zhuǎn)地址等。我們來看看有些什么內(nèi)容

image.png

替換登錄入口邏輯如下：

image.png

在打包前調(diào)用utils.toggleLoginMode()方法即可。

ps:當(dāng)然還有一些其他的代碼我這里就不全部貼出來了。因為還有一些兼容性處理代碼。到這里其實已經(jīng)差不多了。不一定適合所有人。只是剛好有這個需求所以搞了這么個處理方案。