当前位置: 首页 > news >正文

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也不存在 跳转到认证URLthis.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() {// 跳转到认证URLconst 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) {//   去掉本地缓存的登录信息 清除cookiesessionStorage.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值替换掉 那就是只需要改值 不需要改原来的业务逻辑

相关文章:

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

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

Java之枚举

目录 枚举 引入 定义 代码示例 常用方法 代码示例 枚举的优缺点 枚举和反射 面试题 枚举 引入 枚举是在JDK1.5以后引入的。主要用途是:将一组常量组织起来,在这之前表示一组常量通常使用定义常量的方式: publicstaticintfinalRED1;…...

八、适配器模式

适配器模式(Adapter Pattern)是一种结构型设计模式,它允许不兼容的接口之间进行合作。适配器模式通过创建一个适配器类来转换一个接口的接口,使得原本由于接口不兼容无法一起工作的类可以一起工作。 主要组成部分: 目标…...

关于E-R图

一 什么是E-R图 E-R图(Entity-Relationship Diagram)是一种数据建模工具,用于描述数据库中实体之间的关系。它使用实体(Entity)、属性(Attribute)和关系(Relationship&#…...

DVWA通关教程

Brute Force Low 先进行一下代码审计 <?php // 检查是否通过GET请求传递了Login参数&#xff08;注意&#xff1a;这里应该是username或类似的&#xff0c;但代码逻辑有误&#xff09; if( isset( $_GET[ Login ] ) ) { // 从GET请求中获取用户名 $user $_GET[ us…...

网络学习-eNSP配置VRRP

虚拟路由冗余协议(Virtual Router Redundancy Protocol&#xff0c;简称VRRP) VRRP广泛应用在边缘网络中&#xff0c;是一种路由冗余协议&#xff0c;它的设计目标是支持特定情况下IP数据流量失败转移不会引起混乱&#xff0c;允许主机使用单路由器&#xff0c;以及即使在实际…...

Kafka【九】如何实现数据的幂等性操作

为了解决Kafka传输数据时&#xff0c;所产生的数据重复和乱序问题&#xff0c;Kafka引入了幂等性操作&#xff0c;所谓的幂等性&#xff0c;就是Producer同样的一条数据&#xff0c;无论向Kafka发送多少次&#xff0c;kafka都只会存储一条。注意&#xff0c;这里的同样的一条数…...

JavaScript知识点1

目录 1.JavaScript中常用的数组方法有哪些&#xff1f; 2.JavaScript的同源策略&#xff1f; 3.JavaScript中的 NaN 是什么&#xff1f; 4.JavaScript中的split、slice、splice函数区别&#xff1f; 1.JavaScript中常用的数组方法有哪些&#xff1f; 在 JavaScript 中&…...

51单片机个人学习笔记11(AT24C02-I2C总线)

前言 本篇文章属于STC89C52单片机&#xff08;以下简称单片机&#xff09;的学习笔记&#xff0c;来源于B站教学视频。下面是这位up主的视频链接。本文为个人学习笔记&#xff0c;只能做参考&#xff0c;细节方面建议观看视频&#xff0c;肯定受益匪浅。 [1-1] 课程简介_哔哩…...

创建Java项目,可实现main方法运行,实现对性能数据的处理

1、Android Studio无法执行Java类的main方法问题及解决方法 Android Studio无法执行Java类的main方法问题及解决方法_delegatedbuild-CSDN博客 D:\workspaces\performanceTools\.idea 文件夹下&#xff0c;gardle.xml ,添加依赖 <option name"delegatedBuild"…...

JavaWeb(后端)

MVC MVC 就是 Model View Controller 的缩写&#xff0c;属于一种软件架构设计模式一种思想&#xff0c;把我们的项目分为控制器&#xff08;Controller&#xff09;、模型&#xff08;Model&#xff09;、视图&#xff08;view&#xff09;三个部分&#xff0c;model就是处理…...

828华为云征文 | 华为云Flexusx实例,高效部署Servas书签管理工具的优选平台

前言 华为云Flexus X实例&#xff0c;Servas书签管理工具部署的优选平台&#xff01;828节日特惠&#xff0c;让高效管理您的知识宝藏触手可及。Flexus X实例以其卓越的算力、灵活的资源配置和智能调优技术&#xff0c;为Servas提供了稳定、高效的运行环境。无论是快速访问、安…...

分治法和动态规划法

一、分治法&#xff08;Divide and Conquer&#xff09; 定义 分治法是一种将大问题分解成若干个小问题&#xff0c;递归地解决这些小问题&#xff0c;然后将这些小问题的解合并起来得到原问题的解的算法策略。&#xff08;子问题之间相互独立&#xff09; 基本步骤 1.分解…...

【FreeRL】我的深度学习库构建思想

文章目录 前言参考python环境效果已复现结果 综述DQN.py&#xff08;主要&#xff09;算法实现参数修改细节实现显示训练&#xff0c;保存训练 Buffer.pyevaluate.pylearning_curves 前言 代码实现在:https://github.com/wild-firefox/FreeRL 欢迎star 参考 动手学强化学习e…...

Docker部署nginx容器无法访问80端口

问题说明 在阿里云ECS服务器上部署一台CentOS服务器&#xff0c;然后在里面安装了docker服务。用docker部署了nginx&#xff0c;开启docker中的nginx服务&#xff0c;映射宿主机端口80 把阿里云服务器上面的安全组放开了80端口 但是还是无法访问nginx的80web界面 问题分析 查…...

Python语言开发学习之使用Python预测天气

什么是wttr&#xff1f; 使用Python预测天气的第一步&#xff0c;我们要了解wttr是什么。wttr.in是一个面向控制台的天气预报服务&#xff0c;它支持各种信息表示方法&#xff0c;如面向终端的ANSI序列(用于控制台HTTP客户端(curl、httpie或wget))、HTML(用于web浏览器)或PNG(…...

minio实现大文件断点续传

最近工作中遇到一个需求&#xff0c;用户需要上传大文件几百M&#xff0c;为了更好的用户体验&#xff0c;需要支持断点续传&#xff0c;秒传&#xff0c;上传进度条等功能。需求如下&#xff1a; 方案有两种&#xff1a; 第一种&#xff1a;前端直接将整个大文件丢到后端&…...

Qt绘制动态仪表(模仿汽车仪表指针、故障灯)

背景&#xff1a; 项目需要&#xff0c;可能需要做一些仪表显示。此篇除了介绍实现方法&#xff0c;还要说明心路历程。对我而言&#xff0c;重要的是心理&#xff0c;而不是技术。写下来也是自勉。 本人起初心里是比较抵触的&#xff0c;从业20多年了&#xff0c;深知所谓界…...

【视频教程】GEE遥感云大数据在林业中的应用与典型案例实践

近年来遥感技术得到了突飞猛进的发展&#xff0c;航天、航空、临近空间等多遥感平台不断增加&#xff0c;数据的空间、时间、光谱分辨率不断提高&#xff0c;数据量猛增&#xff0c;遥感数据已经越来越具有大数据特征。遥感大数据的出现为相关研究提供了前所未有的机遇&#xf…...

【时时三省】c语言例题----华为机试题<字符串排序>

山不在高&#xff0c;有仙则名。水不在深&#xff0c;有龙则灵。 ----CSDN 时时三省 1&#xff0c;题目 HJ14 字符串排序 描述 给定 n 个字符串&#xff0c;请对 n 个字符串按照字典序排列。 数据范围&#xff1a; 1≤n≤1000 1≤n≤1000 &#xff0c;字符串长度满足 1≤l…...

《Qt C++ 与 OpenCV:解锁视频播放程序设计的奥秘》

引言:探索视频播放程序设计之旅 在当今数字化时代,多媒体应用已渗透到我们生活的方方面面,从日常的视频娱乐到专业的视频监控、视频会议系统,视频播放程序作为多媒体应用的核心组成部分,扮演着至关重要的角色。无论是在个人电脑、移动设备还是智能电视等平台上,用户都期望…...

python/java环境配置

环境变量放一起 python&#xff1a; 1.首先下载Python Python下载地址&#xff1a;Download Python | Python.org downloads ---windows -- 64 2.安装Python 下面两个&#xff0c;然后自定义&#xff0c;全选 可以把前4个选上 3.环境配置 1&#xff09;搜高级系统设置 2…...

《从零掌握MIPI CSI-2: 协议精解与FPGA摄像头开发实战》-- CSI-2 协议详细解析 (一)

CSI-2 协议详细解析 (一&#xff09; 1. CSI-2层定义&#xff08;CSI-2 Layer Definitions&#xff09; 分层结构 &#xff1a;CSI-2协议分为6层&#xff1a; 物理层&#xff08;PHY Layer&#xff09; &#xff1a; 定义电气特性、时钟机制和传输介质&#xff08;导线&#…...

从深圳崛起的“机器之眼”:赴港乐动机器人的万亿赛道赶考路

进入2025年以来&#xff0c;尽管围绕人形机器人、具身智能等机器人赛道的质疑声不断&#xff0c;但全球市场热度依然高涨&#xff0c;入局者持续增加。 以国内市场为例&#xff0c;天眼查专业版数据显示&#xff0c;截至5月底&#xff0c;我国现存在业、存续状态的机器人相关企…...

解决本地部署 SmolVLM2 大语言模型运行 flash-attn 报错

出现的问题 安装 flash-attn 会一直卡在 build 那一步或者运行报错 解决办法 是因为你安装的 flash-attn 版本没有对应上&#xff0c;所以报错&#xff0c;到 https://github.com/Dao-AILab/flash-attention/releases 下载对应版本&#xff0c;cu、torch、cp 的版本一定要对…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

工业自动化时代的精准装配革新:迁移科技3D视觉系统如何重塑机器人定位装配

AI3D视觉的工业赋能者 迁移科技成立于2017年&#xff0c;作为行业领先的3D工业相机及视觉系统供应商&#xff0c;累计完成数亿元融资。其核心技术覆盖硬件设计、算法优化及软件集成&#xff0c;通过稳定、易用、高回报的AI3D视觉系统&#xff0c;为汽车、新能源、金属制造等行…...

selenium学习实战【Python爬虫】

selenium学习实战【Python爬虫】 文章目录 selenium学习实战【Python爬虫】一、声明二、学习目标三、安装依赖3.1 安装selenium库3.2 安装浏览器驱动3.2.1 查看Edge版本3.2.2 驱动安装 四、代码讲解4.1 配置浏览器4.2 加载更多4.3 寻找内容4.4 完整代码 五、报告文件爬取5.1 提…...

安宝特方案丨船舶智造的“AR+AI+作业标准化管理解决方案”(装配)

船舶制造装配管理现状&#xff1a;装配工作依赖人工经验&#xff0c;装配工人凭借长期实践积累的操作技巧完成零部件组装。企业通常制定了装配作业指导书&#xff0c;但在实际执行中&#xff0c;工人对指导书的理解和遵循程度参差不齐。 船舶装配过程中的挑战与需求 挑战 (1…...

springboot整合VUE之在线教育管理系统简介

可以学习到的技能 学会常用技术栈的使用 独立开发项目 学会前端的开发流程 学会后端的开发流程 学会数据库的设计 学会前后端接口调用方式 学会多模块之间的关联 学会数据的处理 适用人群 在校学生&#xff0c;小白用户&#xff0c;想学习知识的 有点基础&#xff0c;想要通过项…...