在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);
  //。。。省略了不相关代码
});

        

          
        
        
        

          

          AI 代码解读
        
      
      

最终的过程会是这样的

1. 浏览器访问https://developer.aliyun.com/profile/fivvrxq7hzcn2/#/detail?id=xxx&type=sso
2. 路由拦截到type=sso，即走代码注释中1-4的逻辑
3. 跳转到回调url,https://developer.aliyun.com/profile/fivvrxq7hzcn2?testCode=xe2dr4_#/detail?id=xxx&type=sse
4. 路由拦截到testCode，走注释中5-6的逻辑。

文章对您有帮助的话，可以帮忙点个赞或者关注，会持续更新前后端技术文章。