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

2024-10-19 22:51:57

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

基本类型放在栈里

内存分配：基本类型（如数字、布尔值、字符串、null、undefined 和 symbol）具有固定的大小，这使得它们可以直接在栈上分配内存。栈是一种后进先出（LIFO）的数据结构，非常适合存储基本类型的数据。
访问速度：栈内存的访问速度非常快，因为栈上的内存地址是连续的，CPU 可以直接通过索引访问这些数据。
垃圾回收：栈上的内存会在作用域结束时自动释放，因此不需要额外的垃圾回收机制。

引用类型放在堆里

内存分配：引用类型（如对象、数组和函数）的大小是不固定的，因为它们可以包含任意数量的数据。因此，它们需要在堆上分配内存，堆是一种动态分配内存的方式，可以灵活地分配不同大小的内存块。
访问速度：堆内存的访问速度相对较慢，因为堆上的内存地址是非连续的，CPU 需要通过引用（指针）来访问这些数据。
垃圾回收：堆上的内存需要通过垃圾回收机制来管理。当一个引用类型的数据不再被任何变量引用时，垃圾回收器会自动回收这部分内存。

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

性能：
- 栈内存：访问速度快，分配和释放内存的速度也快。但是，栈内存的大小是有限的，如果递归调用过深或者分配过多的栈内存，可能会导致栈溢出。
- 堆内存：访问速度相对较慢，分配和释放内存的速度也较慢。但是，堆内存的大小是动态的，可以根据需要分配大量的内存。
空间利用率：
- 栈内存：空间利用率较高，因为栈内存的大小是固定的，且内存分配和释放是连续的。
- 堆内存：空间利用率相对较低，因为堆内存的大小是动态的，且内存分配和释放是不连续的。此外，堆内存中可能存在内存碎片，这会降低空间利用率。

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

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

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

码农公寓