核心依赖版本，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);
//。。。省略了不相关代码
});
最终的过程会是这样的
- 浏览器访问https://developer.aliyun.com/profile/fivvrxq7hzcn2/#/detail?id=xxx&type=sso
- 路由拦截到type=sso，即走代码注释中1-4的逻辑
- 跳转到回调url,https://developer.aliyun.com/profile/fivvrxq7hzcn2?testCode=xe2dr4_#/detail?id=xxx&type=sse
- 路由拦截到testCode，走注释中5-6的逻辑。
文章对您有帮助的话，可以帮忙点个赞或者关注，会持续更新前后端技术文章。
