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.rhkb.cn/news/381616.html

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

相关文章

【数据结构】排序算法——Lessen1

Hi~!这里是奋斗的小羊,很荣幸您能阅读我的文章,诚请评论指点,欢迎欢迎 ~~ 💥💥个人主页:奋斗的小羊 💥💥所属专栏:C语言 🚀本系列文章为个人学习…

防御保护课-防火墙接口配置实验

一、实验拓扑 (我做实验用的图如下) 二、实验要求 1.防火墙向下使用子接口分别对应生产区和办公区 2.所有分区设备可以ping通网关 三、实验思路 配IP; 划分vlan并配置vlan; 配置路由和安全策略。 四、实验配置 1、画图并…

【引领未来智造新纪元:量化机器人的革命性应用】

在日新月异的科技浪潮中,量化机器人正以其超凡的智慧与精准的操作,悄然改变着各行各业的生产面貌,成为推动产业升级、提升竞争力的关键力量。今天,让我们一同探索量化机器人在不同领域的广泛应用价值,见证它如何以科技…

相对定位语法:css+xpath基础语法使用-定位页面元素

文章目录 CSS相对定位获取元素关系定位顺序关系 XPath相对定位基础语法顺序关系-通过索引获取元素选取元素 总结 ✨✨✨学习的道路很枯燥,希望我们能并肩走下来! 编程真是一件很奇妙的东西。你只是浅尝辄止,那么只会觉得枯燥乏味&#xff0c…

python基础语法 007 文件操作-2文件支持模式文件的内置函数

1.3 文件支持的模式 模式含义ropen a file for reading(default)wopen a file for writing,creates a new file if it does not exist or truncates the file if it exists x open a file foe exclusive creation. if the file already exists, the operation fails.独创模式&…

数据结构day4

一、思维导图 二、课后练习 头文件 #ifndef LINKLIST_H #define LINKLIST_H #include <myhead.h>//定义数据类型 typedef int datatype;//定义节点类型 typedef struct Node {union{int len; //头结点数据域datatype data; //普通节点数据域};struct Node *next; …

PyTorch 深度学习实践-处理多维特征的输入

视频指路 参考博客笔记 参考笔记二 通过多个线性模型来模拟非线性的空间变换&#xff0c;矩阵计算就是不同维度之间的空间转换 说明&#xff1a;1、乘的权重(w)都一样&#xff0c;加的偏置(b)也一样。b变成矩阵时使用广播机制。神经网络的参数w和b是网络需要学习的&#xff0c…

浏览器跨tab页面通信方式总结

需求&#xff1a; 浏览器不同 tab 标签页之间是独立的&#xff0c; 如果要通信必须通过特殊手段来实现跨标签页通信。 1.StorageEvent 事件 当一个标签页 localStorage 变化时&#xff08;sessionStorage 无效&#xff09;&#xff0c;同源下另一个或其他所有标签页使用 DO…

buuctf web 第五到八题

[ACTF2020 新生赛]Exec 这里属实有点没想到了&#xff0c;以为要弹shell&#xff0c;结果不用 127.0.0.1;ls /PING 127.0.0.1 (127.0.0.1): 56 data bytes bin dev etc flag home lib media mnt opt proc root run sbin srv sys tmp usr var127.0.0.1;tac /f*[GXYCTF2019]Pin…

React的usestate设置了值后马上打印获取不到最新值

我们在使用usestate有时候设置了值后&#xff0c;我们想要更新一些值&#xff0c;这时候&#xff0c;我们要想要马上获取这个值去做一些处理&#xff0c;发现获取不到&#xff0c;这是为什么呢&#xff1f; 效果如下&#xff1a; 1、原因如下 在React中,当你使用useState钩子…

设计模式11-原型模式

设计模式11-原型模式 写在前面对象创建模式典型模式原型模式动机结构代码推导应用特点要点总结 原型模式与工厂方法模式对比工厂方法模式原型模式什么时候用什么模式 写在前面 对象创建模式 通过对象创建模式绕开动态内存分配来避免创建过程中所导致的耦合过紧的问题。从而支…

谷粒商城实战笔记-40-前端基础-Vue-计算属性、监听器、过滤器

文章目录 一&#xff0c;计算属性1&#xff0c;用途2&#xff0c;用法2.1 定义View2.2 声明计算属性 3&#xff0c;注意事项 二&#xff0c;监听器1. 使用 watch 监听属性的变化 三&#xff0c;过滤器1&#xff0c;定义局部过滤器2&#xff0c;定义全局过滤器3&#xff0c;使用…

GraphPad prism处理cck-8获得ic50

C组为空白对照组&#xff0c;a组为dmso对照组&#xff0c;b组为细胞加药组&#xff0c;八个梯度的药物浓度 一、数据转化 首先&#xff0c;打开软件&#xff0c;选项中选择x的第一项&#xff0c;y的第二项&#xff0c;单一药物浓度设定了几个孔就选几 把自己的药物浓度直接复制…

C语言·函数(超详细系列·全面总结)

前言&#xff1a;Hello大家好&#x1f618;&#xff0c;我是心跳sy&#xff0c;为了更好地形成一个学习c语言的体系&#xff0c;最近将会更新关于c语言语法基础的知识&#xff0c;今天更新一下函数的知识点&#xff0c;我们一起来看看吧&#xff01; 目录 一、函数是什么 &a…

一分钟图情论文:《演化视角下图像的语义表示》

随着图像资源的不断积累&#xff0c;如何有效地表示图像的语义信息成为提高图像检索效率的关键问题。由武汉大学信息管理学院的李旭晖、吴燕秋和王晓光教授合著论文《演化视角下图像的语义表示》中提出了一种基于“演化”视角的图像语义层次描述框架来剖析图像的语义表示问题。…

Android11 framework 禁止三方应用开机自启动

Android11应用自启动限制 大纲 Android11应用自启动限制分析验证猜想&#xff1a;Android11 AOSP是否自带禁止三方应用监听BOOT_COMPLETED​方案禁止执行非系统应用监听到BOOT_COMPLETED​后的代码逻辑在执行启动时判断其启动的广播接收器一棍子打死方案&#xff08;慎用&#…

DevExpress WPF中文教程 - 为项目添加GridControl并将其绑定到数据

DevExpress WPF拥有120个控件和库&#xff0c;将帮助您交付满足甚至超出企业需求的高性能业务应用程序。通过DevExpress WPF能创建有着强大互动功能的XAML基础应用程序&#xff0c;这些应用程序专注于当代客户的需求和构建未来新一代支持触摸的解决方案。 无论是Office办公软件…

【思科】链路聚合实验配置和背景

【思科】链路聚合实验配置和背景 背景链路聚合基本概念链路聚合聚合接口 思科链路聚合协议01.PAgP协议02.LACP协议 思科链路聚合模式LACP协议模式PAgP协议模式ON模式 实验准备配置二层链路聚合LACP协议模式SW1SW2PC1PC2查看LACP聚合组建立情况查看LACP聚合端口情况查看逻辑聚合…

2-40 基于Matlab编写的3维FDTD(时域有限差分算法)计算了球的RCS经典散射问题

基于Matlab编写的3维FDTD(时域有限差分算法)计算了球的RCS经典散射问题&#xff0c;采用PEC作边界&#xff0c;高斯波束激励。程序已调通&#xff0c;可直接运行。 2-40 3维FDTD 时域有限差分算法 - 小红书 (xiaohongshu.com)

Python自动化DevOps任务入门

目录 Python自动化DevOps任务入门 一、环境和工具配置 1. 系统环境与Python版本 2. 虚拟环境搭建 3. 必要的库安装 二、自动化部署 1. 使用Fabric进行流式部署 2. 使用Ansible编写部署剧本 三、持续集成和测试 1. 配置CI/CD工具 选择工具 配置工具 构建和测试自动…