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

news2024/9/24 5:21:56

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

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2110645.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

模型融合创新性好强!最新成果直接登顶SOTA,分分钟拿下顶会

Transformer作者创业新成果火了!他们提出了一个70亿参数的日语数学大模型,直接打败700亿参数的Llama-2取得SOTA!更牛的是,得出这样的模型无需任何梯度训练,所需计算资源大大减少。 这种炸裂的成果得益于模型融合&…

C++模板(初识)

一、泛型编程 我们平时写交换函数的时候,会这样写: //交换两个int类型变量 void Swap(int& left, int& right) {int temp left;left right;right temp; } //交换两个double类型变量 void Swap(double& left, double& right) {doubl…

随着人们网络安全意识提高,软件架构设计与评估也成为重中之重

目录 案例 【题目】 【问题 1】(13 分) 【问题 2】(12分) 【答案】 【问题 1】答案 【问题 2】答案 相关推荐 案例 阅读以下关于软件架构设计与评估的叙述,回答问题 1 和问题 2。 【题目】 某电子商务公司为正更好地管理用户,提升企业销售业绩&…

Linux中Ubuntu系统安装Windows得字体

背景 安装了geoserver 然后geoserver中需要用到微软雅黑字体 所以需要安装一下Linux系统安装Windows中的字体 创建字体目录 cd /usr/share/fonts/ mkdir winfont在Windows找到对应字体 C:\Windows\Fonts 复制该字体到桌面 Linux系统中上传字体 roottest-server03:/usr/sha…

一键解决物流追踪难题:批量查询工具助力电商运营

探索固乔科技,解锁高效物流查询新纪元!固乔快递批量查询助手,一款专为电商、物流从业者及自媒体人打造的神器,让繁琐的物流追踪变得轻松快捷。 想象一下,万级单号批量导入,仅需5分钟,所有物流动…

如何利用mHand Pro动捕数据手套连接虚拟与现实?

数据手套作为虚拟现实中的一种交互动捕设备,能够模拟真人手部的动作和感知反馈,实现人机交互的效果。随着虚拟现实技术的不断发展,数据手套也在不断地改进和升级。 mHand Pro是一款由拥有多年经验的惯性动作捕捉技术团队广州虚拟动力研发的数…

第142天: 内网安全-权限维持黄金白银票据隐藏账户C2 远控RustDeskGotoHTTP

案例一: 内网域&单机版-权限维持-基于用户-隐藏用户 项目下载地址: GitHub - wgpsec/CreateHiddenAccount: A tool for creating hidden accounts using the registry || 一个使用注册表创建隐藏帐户的工具 用这个工具的话在域中会把它加入adminis…

会声会影哪个版本最好用?

会声会影哪个版本最好用? 会声会影2023这个版本是最受欢迎的,它为多数用户提供了稳定且强大的功能。以下是关于为什么这个版本最好用的 一、功能丰富 会声会影X系列版本拥有从视频剪辑、音频编辑到特效添加等全方位的功能。用户可以轻松完成视频的录制、剪辑、转…

SAP ABAP 程序迁移工具 SAPLINK ABAP GIT

SAP ABAP 程序迁移工具 SAPLINK ABAP GIT 1. saplink 这个工具功能挺强大的. 但是使用起来有点麻烦, 需要针对不同的开发对象导入不同的插件.才能处理特定的对象. 而且版本还在不断变化. saplink 项目地址:https://github.com/sapmentors/SAPlink saplink plugin…

鸿蒙轻内核M核源码分析系列六 任务及任务调度(1)任务栈

往期知识点记录: 鸿蒙(HarmonyOS)应用层开发(北向)知识点汇总 持续更新中…… 继续分析鸿蒙轻内核源码,我们本文开始要分析下任务及任务调度模块。首先,我们介绍下任务栈的基础概念。任务栈是高…

SpringBoot整合Minio及阿里云OSS(配置文件无缝切换)

SpringBoot整合Minio及阿里云OSS 文章目录 SpringBoot整合Minio及阿里云OSS1.Minio安装测试1.Docker安装启动容器 2.创建bucket3.上传文件修改权限 2.SpringBoot整合Minio及阿里云OSS1.公共部分抽取2.Minio配置整合1.添加pom依赖2.添加配置文件3.操作接口实现 3.阿里云OSS配置整…

Class4——Esp32|Thonny两种方式同过电脑控制LED灯,路由器与电脑自带热点连接ESP32

上一节我们通过路由器和设备创建了连接,不懂可按上节配置 Class3——Esp32|Thonny——网络连接主机-wifi连接(源代码带教程)-CSDN博客文章浏览阅读57次。Esp32|Thonny网络连接主机-wifi连接(源代码带教程)https://blo…

免费开源的低代码表单FormCreate安装教程,支持可视化设计,适配移动端

低代码表单FormCreate 是一个可以通过 JSON 生成具有动态渲染、数据收集、验证和提交功能的表单生成组件。它支持 6 个 UI 框架,适配移动端,并且支持生成任何 Vue 组件。内置 20 种常用表单组件和自定义组件,再复杂的表单都可以轻松搞定 源码…

网页时装购物:Spring Boot框架的创新应用

第2章相关技术 2.1 B/S架构 B/S结构的特点也非常多,例如在很多浏览器中都可以做出信号请求。并且可以适当的减轻用户的工作量,通过对客户端安装或者是配置少量的运行软件就能够逐步减少用户的工作量,这些功能的操作主要是由服务器来进行控制的…

时尚购物革命:Spring Boot技术在网页时装系统中的应用

第1章 绪论 1.1背景及意义 随着社会的快速发展,计算机的影响是全面且深入的。人们生活水平的不断提高,日常生活中人们对时装购物系统方面的要求也在不断提高,喜欢购物的人数更是不断增加,使得时装购物系统的开发成为必需而且紧迫的…

Rspack 1.0 发布了!

文章来源|Rspack Team 项目地址|https://github.com/web-infra-dev/rspack Rspack 是基于 Rust 编写的下一代 JavaScript 打包工具, 兼容 webpack 的 API 和生态,并提供 10 倍于 webpack 的构建性能。 在 18 个月前,我…

深度学习 --- VGG16能让某个指定的feature map激活值最大化图片的可视化(JupyterNotebook实战)

VGG16能让某个指定的feature map激活值最大化图片的可视化 在前面的文章中,我用jupyter notebook分别实现了,预训练好的VGG16模型各层filter权重的可视化和给VGG16输入了一张图像,可视化VGG16各层的feature map。深度学习 --- VGG16卷积核的可…

说一下场外的伦敦银交易的技巧

在很多讨论伦敦银交易技巧的文章中,一上来就介绍各种交易指标、K线信号等等,这种开门见山的方式很直接也很方便,但也容易忽略了一些场外的技巧,下面我们就来讨论一下场外的关于伦敦银交易的技巧。 何为场外的技巧呢?场…

Java进阶13讲__第十讲__精简

字节流 字节输入流:FileInputStream(原始流/低级流) 字节缓冲流:BufferedInputStream(包装流/处理流) 参数是"低级流" 字节输入流/缓冲流常用格式 byte[] arr new byte[1024];//字节流 int l…

灯塔:MYSQL笔记(2)函数

函数 是指一段可以直接被另一段程序调用的程序或代码。 字符串函数 SELECT 函数(参数); 数值函数 SELECT 函数(参数); -- 生成一个六位验证码 select lpad(round(rand()*1000000,0) ,6,0)as 验证码; 日期函数 流程函数 总结: 约束: 1. 概述&#xff…