主要设计思路

独立的登陆页面项目 ，所有子系统的公共登陆页；
axios请求拦截 ，子系统要做请求拦截,判断是否有token,token可以存在localstory和cookie里；
登陆页 ，登陆成功后,token存入localstory/domain中,重定向到子系统；

独立的登陆页面项目

使用vue-cli4 脚手架搭建公共登陆页系统 ，编写登陆页,(这很简单)
子项目路由拦截必须修改

子系统axios设置

请求拦截

// 请求拦截var mainUrl="https://123123.flagUrl.com"  //登陆页线上部署地址,  根据项目修改
axios.interceptors.request.use(config=>{
//1.在cookie拿取('Authorization'),  前提npm安装''vue-cookies''var accessToken= cookies.get('Authorization')if(!accessToken){accessToken = localStorage.getItem('accessToken')}if (accessToken) {config.headers.Authorization = accessToken;} else {window.location.href = mainUrl?redirectUrli=' + window.location.href; }
})

响应拦截

// 请求拦截
axios.interceptors.response.use(function (response) {//1 判断成功200&&token是否过期//2 不成功 路由跳转window.location.href = mainUrl?redirectUrli=' + window.location.href; //逻辑根据业务写
})

主登陆页代码

登陆成功逻辑

// 简写逻辑  具体根据自己项目改
axios.post(`${this.$url}/test/testRequest`,data)
.then(res=>{
//if 200let result = res.data;let str = window.location.hash;document.cookie = "Authorization=" +result.token +";domain=.flagUrl.com;path=/";localStorage.setItem('accessToken', accessToken);let oldUrls=str.split("redirectUri=")window.location.href = decodeURIComponent(oldUrls[ oldUrls - 1]);})

主要难点

所有子项目路由必须以.flagUrl.com结尾
具体原因,自行百度 “跨域”
cookie设置 domain 使用, 设置localstory
**如果子系统已经是老项目不能用.flagUrl.com **
可以主登陆页面和子系统页面都隐藏一个相同域名的iframe作为中间信息传递, 目的都是为了多系统之间的token传递

VUE 前端SSO单点登录相关推荐

cas跨域单点登录原理_CAS实现SSO单点登录原理
1. CAS 简介 1.1. What is CAS ? CAS ( Central Authentication Service ) 是 Yale 大学发起的一个企业级的.开源的项目,旨 ...
drcom宽带认证登录超时_开发SSO单点登录需要注意的问题
一.单点登录系统开发需要注意的问题 1.单点登录系统需要支持jsonp请求? 单点登录系统主要是向其他系统提供用户身份验证服务,因此需要提供对外接口,而外部系统通过接口访问时,必然涉及跨域问题,因此需 ...
基于CAS实现SSO单点登录
点击关注公众号,实用技术文章及时了解 1. 概述 1.1. 什么是SSO? 单点登录( Single Sign-On , 简称 SSO )是目前比较流行的服务于企业业务整合的解决方案之一, SSO 使 ...
互联网分布式微服务云平台规划分析--SSO单点登录系统
介绍鸿鹄云架构[SSO单点登录系统]为所有微服务提供统一的用户认证服务,系统本身属于微服务模式,使用JWT+Redis分布式存储方案,确保不同微服务.系统之间的安全通讯和统一用户校验.认证.在整个服 ...
实现SSO单点登录的思考
关注 "Java艺术" 我们一起成长! 随着公司业务的发展,子系统越来越多,实现SSO单点登录的需求就愈加迫切. 我们一些子系统中都有使用Redis存储Session,这最初是为了 ...
前后端分离基于Oauth2的SSO单点登录怎样做？
一.说明单点登录顾名思义就是在多个应用系统中,只需要登录一次,就可以访问其他相互信任的应用系统,免除多次登录的烦恼:本文主要介绍跨域间的前后端分离项目怎样实现单点登录,并且与非前后端分离的差 ...
SSO单点登录教程案例客户端和服务端
这里写自定义目录标题前言条件环境要求准备工作下载基础项目项目结构说明执行流程图代码实现单点登录步骤梳理: 代码下载前言文章摘抄:https://www.jianshu.com/p ...
一篇了解SSO单点登录
SSO基础文章目录 SSO基础 1.什么是单点登录? 2.回顾普通系统登录 3.多系统登录的问题与解决? 3.1.Session不共享问题 XXL-SSO框架基础入门 1.什么是XXL-SSO 2. ...
逛淘宝天猫想到SSO单点登录
在前面文章中,我们聊了自建账号体系的注册和登录: 注册登录原理及密码安全问题(链接) 也聊了利用微信和QQ进行第三方登录,并详细讲述了原理和流程: 第三方账号登录的原理(链接) 然后,有朋友留言问到了 ...

VUE 前端SSO单点登录

前端SSO实现

主要设计思路

独立的登陆页面项目

子系统axios设置

主登陆页代码

主要难点

VUE 前端SSO单点登录相关推荐

最新文章

热门文章