前端React单点登录的实现

场景:
在多个系统进行嵌套的情况下,从父系统跳转到子系统时,无需再次登录直接跳转;

原理:在子系统登录页判断url的内容通过location属性,拿到url后面的参数,通过参数调用后端接口实现单点登录;

主要过程:
首先监听登录页面

history.listen((location: { search: string }) => {// 将query经过两次解密   并解构const { loginName, signature, ts, redirect, code } = queryString.parse(location.search.slice(1),);
}

这一步使用了’querystring’模块里面的函数对父系统传来的参数进行解密
querystring 模块提供用于解析和格式化 URL 查询字符串的实用工具。可以使用以下方式访问它：

const querystring = require('querystring');

然后调用单点登录函数:

 if (loginName && signature && ts) {message.info('正在登陆中,请稍后。')dispatch({type: 'login',payload: {loginName,signature,ts,},});}

参数为解构出来的参数;
登录完成后执行正常登录情况下的一系列写入缓存的操作

前端React单点登录的实现相关推荐

VUE 前端SSO单点登录
前端SSO实现主要设计思路独立的登陆页面项目子系统axios设置主登陆页代码主要难点主要设计思路独立的登陆页面项目 ,所有子系统的公共登陆页: axios请求拦截 ,子系统要做请求拦截, ...
前端051_单点登录SSO_注册功能实现
注册功能实现 1.EasyMock 添加注册接口 2.定义 Api 调用用户协议和注册接口 3.提交注册数据 4.测试 1.EasyMock 添加注册接口查询用户名是否已被注册请求URL: /sy ...
多维系统下单点登录深入详解
多维系统下单点登录深入详解 1. 从淘宝天猫的单点登录说起 1.1 SSO单点登录 1.2 淘宝天猫登录场景解析 2. 单点登录之整体解决方案 2.1 设计方案-Cookie 2.2 设计方案-分布式 ...
从前端开发者看待用友建筑云移动端单点登录与报错原因
本文对单点登录有一个初步介绍,重点叙述前端开发者使用单点登录可能遇到的问题,以及问题分析! 方案全部来源于用友建筑云,本文仅用于内部分享,所以不过多介绍方案实现. 原文来自博客单点登录介绍 APP在 ...
Springboot、React集成Okta SAML2单点登录
一.背景: 由于公司内部系统很多,内网系统需集成Okta进行统一化单点登录,便于管理公司内部员工账号,无需每个系统都去维护账户信息,由于项目比较老,springboot是1.5.x版本的,所以未采用s ...
前端跨域请求get_（单点登录）跨域SSO看这篇文章就够了：前端篇
前言前俩篇文章,我们从概念,聊到了服务器中设计的内容.不知道大家是否觉得通俗易懂呢? 接下来的内容则有些偏向前端部分. 正文三.Cookie传递 3.1.通过URL参数实现跨域信息传递我们要在A ...
前端把cookie写在父域里_单点登录的三种实现方式
前言在 B/S 系统中,登录功能通常都是基于 Cookie 来实现的.当用户登录成功后,一般会将登录状态记录到 Session 中,或者是给用户签发一个 Token,无论哪一种方式,都需要在客户端保 ...
前端鉴权必须了解的 5 个兄弟：cookie、session、token、jwt、单点登录
编辑:前端妹 | 来源:HenryLulu_几木链接:juejin.cn/post/6898630134530752520 本文你将看到: 基于 HTTP 的前端鉴权背景 cookie 为什么是最方 ...
前端常见登录实现方案 + 单点登录方案
登录是每个网站中都会用到的一个必备功能,但是如何实现一个优秀的登录功能,如何根据自己的项目来选择一个适合自己的登录方案?今天我们就来介绍几种常用的登录方案. Cookie + Session 登录 T ...

前端React单点登录的实现

前端React单点登录的实现相关推荐

最新文章

热门文章