vue系统获取授权平台授权码实现单点登录、注销功能

公司平台需要对接别的平台实现单点登录注销。简而言之，不需要在自己公司系统登录统一在别的平台登录后获取到登录凭证（授权码）在本公司系统实现免密登录的功能。

流程：

跳转授权页面和保存授权码的代码：

javascript 复制代码

 hrefLogin() {
      // 获取URL中的code参数
      const urlParams = new URLSearchParams(window.location.search);
      const code = urlParams.get('code');
      const cookieCode = getToken();
      console.log(cookieCode, '缓存code')
      // cookie中存在code值，发送给后台验证
      if (cookieCode) {
        this.sendCodeToBackend(1, cookieCode);
      } else {
        if (code) {

          //cookie没值 URL中存在code，将其存储到cookie中 
          //   Cookies.set('code', code, { expires: 718 });
          //   setToken(code)
          this.sendCodeToBackend(2, code);
        } else {
          // URL中不存在code参数，cookie也不存在 跳转到认证URL
          this.redirectToAuth();
        }
      }
    },
    sendCodeToBackend(type, code) {
      // 在这里可以调用API或执行其他逻辑，将code发送给后台
      getAuth(code).then((val) => {
        if (val.code === 200) {
          if (val.data) {
            // 保存本地信息 跳转到首页
            sessionStorage.setItem('realName', val.data.realName)
            sessionStorage.setItem('userId', val.data.userId)
            sessionStorage.setItem('token', code)
            setUserId(val.data.userId)
            if (type == 2) {
              setToken(code)
            }
            // const cookieCode = getToken();
            // console.log(cookieCode, 'code验证成功的')
            this.$router.push({
              path: '/home'
            })
          } else {
            //请求返回错误信息 把cookie里code清除 
            this.redirectToAuth();
            removeToken()
          }
        } else {
          this.$Message.error("获取认证码失败");
          return;
        }
      });
    },
    redirectToAuth() {
      // 跳转到认证URL
      const redirectUrl = '';//认证中心的网址地址
      const applicationId = '';//后台给的applicationId信息
      const state = '1'; 
      const redirectUrlParam = '';//重定向自己系统的地址 在这个地址去接收授权码 我是定位到登录页可以定位到首页 都是在创建时去操作
      const url = `${redirectUrl}?applicationId=${applicationId}&responseType=code&state=${state}&redirectUrl=${encodeURIComponent(redirectUrlParam)}`;
      window.location.href = url;
    },

退出登录代码：

javascript 复制代码

  signOutCli() {
      this.$confirm('此操作将退出系统, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //   调用注销的接口
        logout().then((val) => {
          if (val.code === 200) {
            //   去掉本地缓存的登录信息 清除cookie
            sessionStorage.clear()
            localStorage.clear()
            removeToken()
            this.$router.push({ path: "/" });
            this.$message({
              type: 'success',
              message: '退出成功!'
            });
          }
        })

      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消退出'
        });
      });

    }

总结：系统需要在别的平台统一登录我们系统的登录页面就不需要了在我们的登录页面去获取授权码传给后台验证通过之后即可进入首页首页退出注销登录信息

重点：1、跳转授权页面获取授权码的方向第一步弄错文档没认真看！！没看文档就根据后台说的去请求接口一直处理跨域错误

2、code授权码生成保存时限销毁，code首先是用cookie保存的但是最先生成是路由传值过来的code 即使是这样也不能先判断路由code 应该先判断cookie里面是否存有code 没有在去获取路由的值路由没值去跳转授权界面生成新code值，在有值的情况下传给后台去验证用户信息通过则跳转首页

3、token值全用code值替换掉那就是只需要改值不需要改原来的业务逻辑