当前位置: 首页 > 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…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

Chapter03-Authentication vulnerabilities

文章目录 1. 身份验证简介1.1 What is authentication1.2 difference between authentication and authorization1.3 身份验证机制失效的原因1.4 身份验证机制失效的影响 2. 基于登录功能的漏洞2.1 密码爆破2.2 用户名枚举2.3 有缺陷的暴力破解防护2.3.1 如果用户登录尝试失败次…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

RocketMQ延迟消息机制

两种延迟消息 RocketMQ中提供了两种延迟消息机制 指定固定的延迟级别 通过在Message中设定一个MessageDelayLevel参数&#xff0c;对应18个预设的延迟级别指定时间点的延迟级别 通过在Message中设定一个DeliverTimeMS指定一个Long类型表示的具体时间点。到了时间点后&#xf…...

FastAPI 教程:从入门到实践

FastAPI 是一个现代、快速&#xff08;高性能&#xff09;的 Web 框架&#xff0c;用于构建 API&#xff0c;支持 Python 3.6。它基于标准 Python 类型提示&#xff0c;易于学习且功能强大。以下是一个完整的 FastAPI 入门教程&#xff0c;涵盖从环境搭建到创建并运行一个简单的…...

YSYX学习记录(八)

C语言&#xff0c;练习0&#xff1a; 先创建一个文件夹&#xff0c;我用的是物理机&#xff1a; 安装build-essential 练习1&#xff1a; 我注释掉了 #include <stdio.h> 出现下面错误 在你的文本编辑器中打开ex1文件&#xff0c;随机修改或删除一部分&#xff0c;之后…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

大语言模型如何处理长文本?常用文本分割技术详解

为什么需要文本分割? 引言:为什么需要文本分割?一、基础文本分割方法1. 按段落分割(Paragraph Splitting)2. 按句子分割(Sentence Splitting)二、高级文本分割策略3. 重叠分割(Sliding Window)4. 递归分割(Recursive Splitting)三、生产级工具推荐5. 使用LangChain的…...

Psychopy音频的使用

Psychopy音频的使用 本文主要解决以下问题&#xff1a; 指定音频引擎与设备&#xff1b;播放音频文件 本文所使用的环境&#xff1a; Python3.10 numpy2.2.6 psychopy2025.1.1 psychtoolbox3.0.19.14 一、音频配置 Psychopy文档链接为Sound - for audio playback — Psy…...

WordPress插件:AI多语言写作与智能配图、免费AI模型、SEO文章生成

厌倦手动写WordPress文章&#xff1f;AI自动生成&#xff0c;效率提升10倍&#xff01; 支持多语言、自动配图、定时发布&#xff0c;让内容创作更轻松&#xff01; AI内容生成 → 不想每天写文章&#xff1f;AI一键生成高质量内容&#xff01;多语言支持 → 跨境电商必备&am…...