中​国​移​动​黑​龙​江​​正​浩​创​新​一​面

1. 请尽可能详细地说明，前端如何实现单点登录的流程？

单点登录（Single Sign-On, SSO）是一种身份验证机制，允许用户使用一组凭据登录多个相关但独立的软件系统。在前端实现单点登录的流程通常涉及以下几个步骤：

1. 用户访问应用A

  • 用户尝试访问应用A。
  • 应用A检测到用户未登录，于是将用户重定向到身份验证服务器（如OAuth服务器、OpenID Connect提供商等）。

2. 重定向到身份验证服务器

  • 用户被重定向到身份验证服务器的登录页面。
  • 用户在身份验证服务器上输入凭据（用户名和密码）。

3. 身份验证成功

  • 身份验证服务器验证用户的凭据。
  • 如果验证成功，身份验证服务器生成一个令牌（如JWT）并将其返回给应用A。

4. 返回到应用A并设置会话

  • 应用A接收到令牌后，验证令牌的有效性。
  • 如果令牌有效，应用A创建本地会话，并将用户标记为已登录。

5. 用户访问应用B

  • 用户尝试访问应用B。
  • 应用B检测到用户未登录，于是检查是否存在有效的单点登录会话或令牌。

6. 使用已有的令牌进行验证

  • 如果存在有效的令牌，应用B通过身份验证服务器验证该令牌。
  • 如果令牌有效，应用B创建本地会话，并将用户标记为已登录。

7. 令牌刷新和失效处理

  • 如果令牌有有效期，应用需要定期刷新令牌。
  • 当用户登出时，需要使令牌失效，确保用户无法再使用该令牌访问其他应用。

前端实现细节

1. 使用OAuth 2.0和OpenID Connect
  • 前端库：使用如oidc-client-js等库来处理OAuth 2.0和OpenID Connect流程。
  • 配置：配置客户端ID、重定向URI、身份验证服务器URL等。
  • 登录流程：
    const settings = {authority: 'https://identityprovider.com',client_id: 'your-client-id',redirect_uri: 'https://yourapp.com/callback',response_type: 'code',scope: 'openid profile email',
};const userManager = new Oidc.UserManager(settings);
userManager.signinRedirect();
2. 处理回调和令牌存储
  • 回调处理：
    userManager.signinRedirectCallback().then(user => {// 用户已登录，user对象包含用户信息和令牌localStorage.setItem('access_token', user.access_token);// 创建本地会话
}).catch(error => {console.error('Error during sign-in:', error);
});
3. 令牌验证和刷新
  • 令牌验证：在每次请求时，前端将令牌附加到请求头中，后端验证令牌的有效性。
  • 令牌刷新：
    userManager.refreshAccessToken().then(() => {// 刷新成功，更新本地存储的令牌
}).catch(error => {console.error('Error refreshing access token:', error);
});
4. 登出处理
  • 登出流程：
    userManager.signoutRedirect();

安全注意事项

  • HTTPS：确保所有通信都通过HTTPS进行。
  • 令牌存储：避免在localStorage中存储敏感信息，使用安全的存储方式。
  • CSRF防护：在后端实施CSRF防护措施。

通过上述流程和细节，前端可以实现一个安全且高效的单点登录系统。

2. 请尽可能详细地说明，JavaScript为什么基本类型放在栈里，而引用类型放在堆里？对比栈内存和堆内存，在性能、空间利用率等方面有什么不同？你的回答中不要写出示例代码。

JavaScript 中的基本类型和引用类型之所以分别存储在栈内存和堆内存中，是因为它们在内存分配、访问速度和垃圾回收等方面有根本的区别。以下是详细解释：

基本类型放在栈里

  1. 内存分配：基本类型（如数字、布尔值、字符串、null、undefined 和 symbol）具有固定的大小，这使得它们可以直接在栈上分配内存。栈是一种后进先出（LIFO）的数据结构，非常适合存储基本类型的数据。

  2. 访问速度：栈内存的访问速度非常快，因为栈上的内存地址是连续的，CPU 可以直接通过索引访问这些数据。

  3. 垃圾回收：栈上的内存会在作用域结束时自动释放，因此不需要额外的垃圾回收机制。

引用类型放在堆里

  1. 内存分配：引用类型（如对象、数组和函数）的大小是不固定的，因为它们可以包含任意数量的数据。因此，它们需要在堆上分配内存，堆是一种动态分配内存的方式，可以灵活地分配不同大小的内存块。

  2. 访问速度：堆内存的访问速度相对较慢，因为堆上的内存地址是非连续的，CPU 需要通过引用（指针）来访问这些数据。

  3. 垃圾回收：堆上的内存需要通过垃圾回收机制来管理。当一个引用类型的数据不再被任何变量引用时，垃圾回收器会自动回收这部分内存。

栈内存和堆内存的性能和空间利用率对比

  1. 性能：

    • 栈内存：访问速度快，分配和释放内存的速度也快。但是，栈内存的大小是有限的，如果递归调用过深或者分配过多的栈内存，可能会导致栈溢出。
    • 堆内存：访问速度相对较慢，分配和释放内存的速度也较慢。但是，堆内存的大小是动态的，可以根据需要分配大量的内存。

  2. 空间利用率：

    • 栈内存：空间利用率较高，因为栈内存的大小是固定的，且内存分配和释放是连续的。
    • 堆内存：空间利用率相对较低，因为堆内存的大小是动态的，且内存分配和释放是不连续的。此外，堆内存中可能存在内存碎片，这会降低空间利用率。

总之，基本类型放在栈里，引用类型放在堆里，是为了在内存分配、访问速度和垃圾回收等方面取得最佳的性能和空间利用率。

3. 请尽可能详细地说明，前端数组去重有哪些方法？

在前端编程中，数组去重是一个常见的需求，可以通过多种方法实现。以下是一些常见的数组去重方法：

1. 使用 Set 对象

Set 对象是 ES6 引入的一种新的数据结构，它存储的元素是唯一的。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [...new Set(array)];
console.log(uniqueArray); // [1, 2, 3, 4, 5]

2. 使用 Array.prototype.filter 方法

filter 方法可以用来筛选数组中的元素，结合 indexOf 方法可以实现去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.filter((item, index) => array.indexOf(item) === index);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

3. 使用 Array.prototype.reduce 方法

reduce 方法可以用来累积数组中的元素，结合 includes 方法可以实现去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = array.reduce((acc, item) => {if (!acc.includes(item)) {acc.push(item);}return acc;
}, []);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

4. 使用 for 循环和 includes 方法

通过遍历数组并检查元素是否已经存在于新数组中，可以实现去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = [];
for (let i = 0; i < array.length; i++) {if (!uniqueArray.includes(array[i])) {uniqueArray.push(array[i]);}
}
console.log(uniqueArray); // [1, 2, 3, 4, 5]

5. 使用 Object.keys 和 Array.prototype.map 方法

通过将数组元素作为对象的键，可以实现去重。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Object.keys(array.reduce((acc, item) => {acc[item] = true;return acc;
}, {})).map(Number);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

6. 使用 Array.from 和 Set 对象

类似于第一种方法，但使用了 Array.from 方法。

const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = Array.from(new Set(array));
console.log(uniqueArray); // [1, 2, 3, 4, 5]

7. 使用 lodash 库的 uniq 方法

如果你使用了 lodash 库，可以直接使用 uniq 方法。

const _ = require('lodash');
const array = [1, 2, 2, 3, 4, 4, 5];
const uniqueArray = _.uniq(array);
console.log(uniqueArray); // [1, 2, 3, 4, 5]

性能考虑

  • Set 和 Array.from(new Set) 方法通常是最快的，因为它们是内置的 JavaScript 方法。
  • filter 和 reduce 方法在处理大型数组时可能会比较慢，因为它们涉及到多次遍历数组。
  • for 循环和 includes 方法在某些情况下可能更快，但代码可读性较差。

选择哪种方法取决于具体的需求和性能考虑。

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

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

相关文章

GitLab 老旧版本如何升级？

GitLab 老旧版本如何升级？

极狐GitLab 正式对外推出 GitLab 专业升级服务 https://dl.gitlab.cn/cm33bsfv&#xff01; 专业的技术人员为您的 GitLab 老旧版本实例进行专业升级&#xff01;服务详情可以在官网查看详细解读&#xff01; 那些因为老旧版本而被攻击的例子 话不多说&#xff0c;直接上图&a…
阅读更多...
通用大模型应用研究七：RAGOS和AgentOS

通用大模型应用研究七：RAGOS和AgentOS

RAG&#xff0c;即检索增强生成&#xff08;Retrieval-Augmented Generation&#xff09;&#xff0c;是一种结合了信息检索和大型语言模型&#xff08;LLM&#xff09;提示的技术。它通过从数据源检索相关信息&#xff0c;并将检索到的信息与问题一起注入到LLM提示中&#xff…
阅读更多...
一起赚美元第九期及相关推荐

一起赚美元第九期及相关推荐

一、核心内容 &#xff08;一&#xff09;一起赚美元第九期文章导读 作者复盘了在 10 天内通过知识付费赚到 220750 美元的故事。运营数据&#xff1a;24 号课程做完&#xff0c;28 号课程开卖&#xff0c;10 天后 262 人付款&#xff0c;均价 800 美元&#xff0c;总金额 22…
阅读更多...
【Android】事件分发机制

【Android】事件分发机制

Android 的事件分发机制主要包括以下几个步骤&#xff1a; 事件生成&#xff1a;用户在设备上进行触摸、滑动等操作时&#xff0c;系统会生成相应的事件&#xff0c;如触摸事件&#xff08;MotionEvent&#xff09;。 事件发送&#xff1a;生成的事件会被发送到当前活动&#…
阅读更多...
【linux】线程 (三)

【linux】线程 (三)

13. 常见锁概念 &#xff08;一&#xff09;了解死锁 死锁是指在一组进程中的各个进程均占有不会释放的资源&#xff0c;但因互相申请被其他进程占有的&#xff0c;且不释放的资源&#xff0c;而处于的一种永久等待状态 &#xff08;二&#xff09;死锁四个必要条件 互斥条件…
阅读更多...
uniapp项目结构基本了解

uniapp项目结构基本了解

基本结构的解释 App.vue&#xff1a;应用的根组件&#xff0c;定义全局布局和逻辑。pages/&#xff1a;存放各个页面的 .vue 文件&#xff0c;定义应用的具体页面和功能模块。main.js&#xff1a;应用入口文件&#xff0c;初始化应用&#xff0c;挂载 App.vue。manifest.json&…
阅读更多...
【C++】— 一篇文章让你认识STL

【C++】— 一篇文章让你认识STL

文章目录 &#x1f335;1.什么是STL&#xff1f;&#x1f335;2.STL的版本&#x1f335;3.STL的六大组件&#x1f335;4.STL的重要性&#x1f335;5. 如何学习STL&#x1f335;6. 学习STL的三种境界 &#x1f335;1.什么是STL&#xff1f; STL是Standard Template Library的简称…
阅读更多...
『完整代码』靠近显示对话图标

『完整代码』靠近显示对话图标

在NPC预制体中增加Canvas 并设置 创建Image 并设置 隐藏Image 在场景中创建Canvas 重命名为CurrentCanvas 创建空物体设置底端锚点 重命名为DownPin 创建Image重命名为TalkUI 选择图片设置 创建Image并设置 重命名为imgNpc 创建文本并设置 重命名为txtNpc 可以给图片与文本加一…
阅读更多...
centos 安装达梦数据库

centos 安装达梦数据库

一、环境准备 1.1、确认操作系统的版本和数据库的版本是否一致 ## 查看系统版本&#xff1a;cat /etc/redhat-release CentOS Linux release 7.5.1804 (Core)1.2、关闭防火墙和Selinux # 查看selinux是不是disabled / enforce cat /etc/selinux/config## 查看防火墙状态 fir…
阅读更多...
windows mysql 8.0版本重置root密码

windows mysql 8.0版本重置root密码

1.停止mysql服务 以管理员运行cmd 2.安全模式启动 mysqld --console --skip-grant-tables --shared-memory 3.修改密码 再开个cmd窗口就可以进入了&#xff1a;mysql 先进入mysql database&#xff1a;use mysql 修改密码&#xff1a;ALTER USER rootlocalhost IDENTIFIED …
阅读更多...
使用 InfiniBand 写入带宽对 NVIDIA GPUDirect RDMA 进行基准测试

使用 InfiniBand 写入带宽对 NVIDIA GPUDirect RDMA 进行基准测试

简介 性能基准测试是 HPC 的标志。最现代的超级计算机是具有异构架构的计算节点集群。在这样的节点中&#xff0c;我们可以看到经典 CPU 和专用计算协处理器 (GPU)。本教程介绍了使用基于 InfiniBand 写入带宽 (ib_write_bw) 构建的定制脚本对 NVIDIA GPUDirect 远程直接内存访…
阅读更多...
Xmind一款极简思维导图和头脑风暴软件，支持PC和移动端，Xmind 2024.10.01101版本如何升级到Pro版？简单操作，最新可用！

Xmind一款极简思维导图和头脑风暴软件，支持PC和移动端，Xmind 2024.10.01101版本如何升级到Pro版？简单操作，最新可用！

文章目录 Xmind下载安装Xmind免费升级到Pro Xmind 是一款全功能的思维导图和头脑风暴软件&#xff0c;不限制节点和文件数&#xff0c;创新无限&#xff0c;界面纯净简洁无广告&#xff0c;支持PC和移动端&#xff0c;思维导图和大纲视图自由切换&#xff0c;可本地化文档存储&…
阅读更多...
AutoFixture：.NET 的假数据生成工具

AutoFixture：.NET 的假数据生成工具

上次推荐过《Bogus&#xff1a;.NET的假数据生成利器》方便我们制造假数据测试。今天继续推荐另外一个也是非常流行的工具。 01 项目简介 AutoFixture 是一个用于 .NET 的测试工具&#xff0c;它允许开发者在单元测试中自动生成随机的测试数据。它支持广泛的数据类型&#xf…
阅读更多...
如何使用DockerSpy检测你的Docker镜像是否安全

如何使用DockerSpy检测你的Docker镜像是否安全

关于DockerSpy DockerSpy是一款针对Docker镜像的敏感信息检测与安全审计工具&#xff0c;该工具可以帮助广大研究人员在Docker Hub上检测和搜索自己镜像的安全问题&#xff0c;并识别潜在的泄漏内容&#xff0c;例如身份验证密钥等敏感信息。 功能介绍 1、安全审计&#xff1a…
阅读更多...
React源码03 - React 中的更新

React源码03 - React 中的更新

03 - React 中的更新 React 中创建更新的方式&#xff1a; 初次渲染&#xff1a;ReactDOM.render、ReactDOM.hydrate 后续更新&#xff1a;setState、forceUpdate 1. ReactDOM.render() 先创建 ReactRoot 顶点对象然后创建 FiberRoot 和 RootFiber创建更新&#xff0c;使应用进…
阅读更多...
ArcGIS应用指南：多尺度渔网创建

ArcGIS应用指南：多尺度渔网创建

在GIS中&#xff0c;创建渔网矢量文件是GIS中的一项常见任务&#xff0c;通过将研究区域划分为规则的网格&#xff0c;可以更精细地分析和管理城市空间数据。本文以厦门市行政区为例&#xff0c;详细介绍了如何创建不同尺度的渔网矢量网格&#xff0c;以适应不同区域的发展特点…
阅读更多...
DCS项目调试踩坑记录

DCS项目调试踩坑记录

最近在调试一个DCS项目&#xff08;集散控制系统&#xff09;&#xff0c;实际上就是一个新建厂区的控制系统。PLC用的是西门子1500&#xff0c;控制画面使用组态王7.5。 在调试过程中&#xff0c;发现给西门子DB块的变量转移到组态王太难了&#xff0c;因此记录一下&#xff0…
阅读更多...
RHCE【远程连接服务器】

RHCE【远程连接服务器】

目录 一、远程连接服务器简介 二、加密技术简介 SSH工作过程&#xff1a; &#xff08;1&#xff09;版本协商阶段 &#xff08;2&#xff09;密钥和算法协商阶段 &#xff08;3&#xff09;认证阶段 &#xff08;4&#xff09;会话请求阶段 &#xff08;5&#xff0…
阅读更多...
互联网人口红利趋缓下的社群粉丝经济新模式探索

互联网人口红利趋缓下的社群粉丝经济新模式探索

摘要&#xff1a;随着互联网人口红利消失近十年&#xff0c;国内互联网人口红利爆发时期凭借大量用户取得成功的模式不再适用。如今互联网人口增长进入平缓期&#xff0c;社群粉丝经济成为新方向。其能借助人群画像精准推送营销信息&#xff0c;降低成本。如“21 链动模式 AI 智…
阅读更多...
android openGL ES详解——混合

android openGL ES详解——混合

一、混合概念 混合是一种常用的技巧&#xff0c;通常可以用来实现半透明。但其实它也是十分灵活的&#xff0c;你可以通过不同的设置得到不同的混合结果&#xff0c;产生一些有趣或者奇怪的图象。混合是什么呢&#xff1f;混合就是把两种颜色混在一起。具体一点&#xff0c;就…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023