自学内容网 自学内容网
自学内容网 > 正文

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

🕗 发布于 2024-10-20 07:27 javascript  开发语言  ecmascript  面试  前端  

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 方法在某些情况下可能更快，但代码可读性较差。

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


原文地址：https://blog.csdn.net/qq_43858368/article/details/143085126

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

相关文章

自学内容网
Copyright © 2015-2024