在vue项目中实现单点登录

核心依赖版本，vue3.4.x，vue-router4.3.x。
由于vue项目一般都是前后端分离的，所以这里单点的跳转需要在vue中处理。
一开始考虑将单点跳转做在后端，但那样感觉又将前后端强耦合了起来，所以最终还是决定将单点认证的跳转做在前端。

实现逻辑

在路由守卫中对url进行判断，如果url中包含了需要进行单点登录的query参数，比如type=sso，则向后端请求sso跳转路径，并将跳转路径的回调路径设置为当前的window.location.href。
在sso回调当前url时，会带上对应的code值或者token，我们再在路由守卫中通过code值获取token，或者直接存储token，并根据token获取用户信息，和跳转到目标页面。
说的可能不是很详细，可以结合后边的具体代码来理解。

具体代码

注意这里的代码只是截取，方便理解，所以直接贴到编辑器会报错哈。

router.beforeEach(async (to: ToRouteType, _from, next) => {//。。。省略了不相关代码let userInfo = storageLocal().getItem<DataInfo>(userKey);//获取本地缓存，看用户是否已经登录if (!userInfo) {let currentUrl = window.location.href;//存储当前浏览器url。由于vue只识别hash后的参数，所以这里使用window.location.href获取url中的参数const match = currentUrl.match(/testCode=([^&#]*)/); //匹配url中的testCode参数，使用&和#作为分隔符const testCode = match ? match[1] : null;if (testCode) {// 5.如果有值，代表是从单点登录回调的url，则根据testCode获取认证信息// 6.由于我这边的场景，testCode不是直接的token，所以需要发请求获取token和用户信息，并缓存到本地await loginByTestCode(testCode);} else if (to.query.type == "sso") {//1.如果query参数中包含type=sso，则代表需要进行单点认证。//2.替换url中的sso为sse，防止出现死循环跳转currentUrl = currentUrl.replace("sso", "sse");//3.向后端发请求获取sso认证跳转链接const ssoUrl = await getSsoUri(currentUrl);//4.直接通过href跳转window.location.href = ssoUrl;}}//再次获取用户信息，如果没获取到，则跳转到登录页。获取到用户信息，则跳转到对应的具体信息页userInfo = storageLocal().getItem<DataInfo>(userKey);//。。。省略了不相关代码
});