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

公司平台需要对接别的平台 实现单点登录 注销。简而言之,不需要在自己公司系统登录 统一在别的平台登录后获取到登录凭证(授权码) 在本公司系统实现免密登录的功能。
流程:
登录文档
在这里插入图片描述
跳转授权页面和保存授权码的代码:

 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;
    },

退出登录代码:

  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值替换掉 那就是只需要改值 不需要改原来的业务逻辑

  • 3
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值