Vue项目实现单点登录(SSO)的逻辑和基本流程

项目集群如果一个一个登录会非常麻烦,尤其是一些大企业或者多项目使用一套体系数据的环境中,这时候登录中心也就应用而生, 今天简单说一下vue sso的实现思路,vue项目实现单点登录(SSO)通常涉及以下几个步骤:

  1. SSO:单点登录允许用户使用一组凭证(如用户名和密码)访问多个相关但独立的软件系统,尤其是再大企业内或者多个项目用一套体系登录的环境中,要实现sso需要一个中央认证服务器(登录中心)来处理认证。
  2. 集成认证服务:应用需要与SSO服务提供商集成,涉及到使用OAuth2.0、OpenID Connect或其他认证协议。
  3. 应用配置:您需要在Vue应用中配置认证流程,包括处理登录、注销和认证令牌的刷新。
  4. 处理登录跳转:当用户尝试访问需要认证的资源时,Vue应用应重定向到SSO登录中心。
  5. 处理回调:用户在SSO登录中心认证后,会被重定向回您的Vue应用,通常携带一个认证令牌。
  6. 验证令牌:Vue应用需要验证从SSO登录中心接收到的令牌,并据此建立用户会话。
  7. 维护会话状态:一旦用户通过SSO认证,Vue应用需要维护用户的登录状态,直到用户注销或令牌过期。

下面是一个简化的基础示例,说明Vue应用如何集成SSO:
由浅入深,我们先看一个未登录情况下,直接访问项目页面的示例:

router/index.js配置路由是否需要auth授权

// router.js 或类似的路由配置文件
import Vue from 'vue';
import Router from 'vue-router';
import Home from './views/Home.vue';
import Callback from './views/Callback.vue';Vue.use(Router);const router = new Router({mode: 'history',routes: [{path: '/',name: 'home',component: Home,},{path: '/callback',name: 'callback',component: Callback,meta:{requireAuth:true,   //true为需要, false不需要}},// 其他路由...],
});export default router;

main.js

/** 前置导航守卫,用于进入router前判断是否已登录 */
router.beforeEach((to, from, next) => {if (to.meta.requireAuth) {// 判断是否已登录if (JSON.parse(localStorage.getItem('user')) !== null) {next()   //放行} else {next({path: '/login'})   // 去登录页//这里可以把当前进入的页面用本地存储保存起来或者或者用url传到登录页,登陆后再跳转回来,我建议直接传过去就行,如果是保存起来跳转回来时不要忘记删除掉该信息}} else {// 不需要auth 正常跳转next()}
})

跳转登录页这里可以把当前进入的页面用本地存储保存起来或者或者用url传到登录页,登陆后再跳转回来,我建议直接传过去就行,如果是保存起来跳转回来时不要忘记删除掉该信息

再看一下跳转其他项目实现登录,一个应用内令牌失效后跳转登录和回到页面的示例:

// main.js
import Vue from 'vue';
import App from './App.vue';
import router from './router';
import axios from 'axios';
Vue.config.productionTip = false;// 假设你的SSO登录中心有一个登录URL和一个回调URL
const SSO_LOGIN_URL = 'https://sso.center/login';   //登陆中心
const SSO_CALLBACK_URL = 'http://your.vue.app/callback';    //当前页面router.beforeEach((to, from, next) => {// 检查路由是否需要认证if (to.meta.requiresAuth) {// 检查本地是否有有效的认证令牌const token = localStorage.getItem('authToken');if (token) {next();     // 如果有令牌,继续} else {// 如果没有令牌,重定向到SSO登录中心window.location.href = `${SSO_LOGIN_URL}?redirect=${encodeURIComponent(SSO_CALLBACK_URL)}`;}} else {next();    // 如果路由不需要认证,直接继续}
});new Vue({router,render: h => h(App),
}).$mount('#app');

//登录中心登录后处理

// 处理SSO回调
router.beforeEach((to, from, next) => {if (to.path === '/callback') {// 从URL中提取认证令牌const token = extractTokenFromUrl();if (token) {// 验证令牌并存储localStorage.setItem('authToken', token);// 重定向到用户最初请求的页面next(from.fullPath);} else {// 如果没有令牌,重定向到错误页面或登录页面next('/login');}} else {next();}
});function extractTokenFromUrl() {// 实现从URL中提取令牌的逻辑
}

sso大致的流程图示如下:
在这里插入图片描述

附上基础的登录和推出登录伪代码:
login


// login
// 判断有无已保存账号信息
if (JSON.parse(localStorage.getItem('user') !== null)) {localStorage.removeItem('user')
}
const user = {id: username,password: password
}
localStorage.setItem('user', JSON.stringify(user))//---------------------------------------------// logout
// 移除本地保存账号信息
localStorage.removeItem('user')

请求封装401处理,有token但是无效的情况下,会触发401状态,需要处理跳转登录。

大致的思路就是
1.判断权限
2.获取用户登录信息
3.获取http请求状态
4.直接访问或去登录
5.保存当前页并去登录页
6.登录后保存用户信息并跳转回访问页面

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

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

相关文章

LabVIEW和Alicat Scientific质量流量计实现精确流量控制

在现代工业自动化和科研实验中,精确的气体流量控制至关重要。这里将介绍一个使用LabVIEW与Alicat Scientific公司的质量流量计实现流量控制的项目。项目采用Alicat Scientific的质量流量计(型号:M-200SCCM-D),通过LabV…

AB测试介绍

AB测试是一种类似于对照实验的方法,广泛应用于产品开发、优化和营销等领域,特别是在游戏设计和发行过程中。以下是对AB测试的详细解释: 一、定义与原理 AB测试,又称A/B测试,是一种统计学上的假设检验方法。它将数据分…

R绘制Venn图及其变换

我自己在用R做各种分析时有不少需要反复用到的基础功能,比如一些简单的统计呀,画一些简单的图等等,虽说具体实现的代码也不麻烦,但还是不太想每次用的时候去找之前的代码。 索性将常用的各种函数整成了一个包:pcutils…

手撸俄罗斯方块——工程介绍

概述 接下来我们将从工程角度分析本项目。本项目采用大仓模式,利用 yarn lerna 对项目进行管理,项目结构如下: . ├── packages │ ├── core 俄罗斯方块的核心逻辑 │ ├── console 俄罗斯方块的控制台版本的实现 │ ├── …

【SpringBoot】单元测试之测试Service方法

测试Service方法 SpringBootTest public class UserServiceTest{ Autowired private UserService userService; Test public void findOne () throws Exception{ Assert.assertEquals("1002",userService.findOne()); } } 测试Controller接口方法 Runwith(S…

TCP Socket编程示例

介绍 本文主要学习TCP socket编程的代码。socket常用于客户端发起连接&#xff0c;服务端一般都会用一些高性能网络框架&#xff0c;不会让你手写socket服务端的。客户端代码基本都差不多。 服务端 server.cpp: #include <iostream> #include <unistd.h> #incl…

[CP_AUTOSAR]_分层软件架构_接口之通信模块交互介绍

目录 1、协议数据单元(PDU)传输2、通信模块的案例2.1、SDU、 PCI & PDU2.2、通信模块构成2.3、从数据传输的角度看Communication2.4、Communication中的接口 在前面 《关于接口的一些说明》 以及  《Memory软件模块接口说明》 中&#xff0c;简要介绍了CP_AUTOSAR分层…

ByteBuf释放注意的问题

Bytebuf需要释放&#xff0c;否则可能导致OOM。 如果bytebbuf传递到了head或tail&#xff0c;不需要我们关心。 在head和tail里&#xff08;head实现了outhandler、inhander。tail实现了inhander&#xff09;&#xff0c;底层自动调用了bytebuf.release。 其他情况需要我们手动…

MySQL(终章)视图, 用户管理, C连接MySQL.

目录 1.视图; 2.用户管理; 1.视图: 1.1 概念和基本操作: 视图本质就是表结构, 虚拟表. 视图和基表数据的改变都会相互影响. 创建视图语法: create view 视图名 as select语句&#xff1b; 修改视图: update set ; 删除视图: drop view 视图名&#xff1b; 1. 2 视图使用规则: …

集成学习的艺术:使用Scikit-Learn实现模型融合

集成学习的艺术&#xff1a;使用Scikit-Learn实现模型融合 在机器学习领域&#xff0c;集成学习是一种强大的技术&#xff0c;它通过结合多个模型的预测来提高整体性能。Scikit-Learn&#xff08;简称sklearn&#xff09;&#xff0c;作为Python中最受欢迎的机器学习库之一&am…

IP地址:由电脑还是网线决定?

IP地址&#xff1a;由电脑还是网线决定&#xff1f; 在互联网时代&#xff0c;IP地址是我们进行网络通信的基础。然而&#xff0c;对于IP地址究竟是由电脑决定还是由网线决定的问题&#xff0c;不少人可能存在疑惑。本文将从IP地址的定义、分配方式以及影响因素等方面进行探讨…

减分兔搜题-12123学法减分20题目及答案 #媒体#职场发展

对于即将参加驾驶考试的朋友来说&#xff0c;掌握一些经典题目和答案至关重要。今天&#xff0c;我就为大家带来了这样一份干货——20道驾驶考试题目和答案&#xff0c;助你轻松应对考试&#xff01;这些题目不仅包括了考试中常考的内容&#xff0c;还有针对难点和重点的详细解…

时序数据库-02-聊一聊时序数据库

时序数据库系列 时序数据库-01-时序数据库有哪些&#xff1f;为什么要使用 时序数据库-02-聊一聊时序数据库 时序数据库-03-pentsdb-分布式时序数据库 时序数据库-04-InfluxData-分布式时序数据库 时序数据库-05-TDengine 是一款开源、高性能、云原生的时序数据库 (Time-S…

ETL数据同步之DataX,附赠一套DataX通用模板

今天跟大家分享数据同步datax的模板&#xff0c;小伙伴们简单直接借鉴使用。 还记得上一篇关于大数据DS调度工具的分享嘛&#xff1f; 主流大数据调度工具DolphinScheduler之数据ETL流程-CSDN博客 里面的核心就是采用了DATAX的数据同步原理。 一&#xff0c;什么是DataX D…

基于luckysheet实现在线电子表格和Excel在线预览

概述 本文基于luckysheet实现在线的电子表格&#xff0c;并基于luckyexcel实现excel文件的导入和在线预览。 效果 实现 1. luckysheet介绍 Luckysheet &#xff0c;一款纯前端类似excel的在线表格&#xff0c;功能强大、配置简单、完全开源。 官方文档在线Demo 2. 实现 …

华为云.VPC关联概念与对等连接实践

云计算.华为云 VPC关联概念与对等连接实践 - 文章信息 - Author: 李俊才 (jcLee95) Visit me at CSDN: https://jclee95.blog.csdn.netMy WebSite&#xff1a;http://thispage.tech/Email: 291148484163.com. Shenzhen ChinaAddress of this article:https://blog.csdn.net/q…

AWS全服务历史年表:发布日期、GA和服务概述一览(一)

我一直在尝试从各种角度撰写关于Amazon Web Services&#xff08;AWS&#xff09;的信息和魅力。由于我喜欢技术历史&#xff0c;这次我总结了AWS服务发布的历史年表。 虽然AWS官方也通过“Whats New”发布了官方公告&#xff0c;但我一直希望能有一篇文章将公告日期、GA日期&…

Java流的奥秘:字节与字符的交响乐章

在Java编程的广阔天地中&#xff0c;数据的流动如同一条条看不见的河流&#xff0c;滋养着程序的生命力。而流(Stream)作为数据传输的核心机制&#xff0c;承载着数据的读写重任。今天&#xff0c;我们将深入探讨字节流与字符流的精妙之处&#xff0c;解锁它们背后的编程艺术。…

视频监控平台LntonCVS视频融合共享平台智慧安防视频监控汇聚应用方案

LntonCVS是一款功能强大且灵活部署的安防视频监控平台。它支持多种主流标准协议&#xff0c;包括GB28181、RTSP/Onvif、RTMP等&#xff0c;同时能够兼容海康Ehome、海大宇等厂家的私有协议和SDK接入。该平台不仅提供传统的安防监控功能&#xff0c;还支持接入AI智能分析&#x…

无人机之产业链篇

无人机产业链上游为无人机设计研发及关键原材料的生产&#xff0c;其中关键原材料有金属材料和复合材料两大类&#xff0c;包括钛合金、铝合金、陶瓷基等特殊材料 中游无人机整机制造包括飞行系统、地面系统、任务载荷系统三个方面&#xff0c;是无人机制造的核心部分&#xf…