No19.精选前端面试题，享受每天的挑战和学习

为什么对登录密码进行MD5加密

对登录密码进行 MD5 加密是为了增加密码的安全性。

MD5（Message Digest Algorithm 5）是一种常见的哈希函数算法，通过将输入的数据转换为固定长度的哈希值来实现加密。MD5 算法生成的哈希值通常是一个 32 位的十六进制数。

使用 MD5 加密密码的好处有：

1. 隐藏原始密码

使用 MD5 加密后，原始密码将被转化成一段看似随机的字符，不容易直接从中获取到用户的真实密码。

2. 防止明文存储

在用户注册时，将密码明文存储到数据库中是不安全的做法。通过对密码进行 MD5 加密后，只将加密后的哈希值存储到数据库，即使数据库泄露也不会直接暴露用户的密码。

3. 抵御彩虹表攻击

彩虹表是一种预先计算好的密码哈希值与对应密码的映射表，攻击者可以使用彩虹表通过查找哈希值的方式快速破解密码。通过对密码进行加盐操作再进行 MD5 加密，可以有效防止彩虹表攻击。

需要注意的是，MD5 加密算法已经存在一些安全问题，如碰撞攻击和彩虹表等。因此，在实际应用中，建议将密码加盐（在原始密码中添加随机字符串）后再进行哈希加密，以提高安全性。另外，还可以选择更安全的哈希算法，如SHA-256或bcrypt等来替代MD5。

Pinia和vuex的区别

下表列出了 Pinia 和 Vuex 之间的几个关键区别：

功能	Pinia	Vuex
设计理念	基于 Vue 3 Composition API	针对 Vue 2.x 的全局状态管理器
类型支持	支持 TypeScript	对 TypeScript 支持有限
安装方式	单独安装	Vue CLI 创建的项目中默认集成
模块化	使用插件系统，模块化定义和导出	使用对象进行全局状态的定义和导出
可访问性	提供了强类型支持，更好的 IntelliSense 支持	缺乏强类型支持，IntelliSense 不如 Pinia 完善
性能优化	基于 Vue 3 的响应式系统，具有更高的性能和内存效率	相对于 Vue 2.x，性能较低
插件生态圈	较新，相对较小，正在快速发展	成熟且拥有大量第三方插件
Vuex 迁移成本	需要修改代码以适配新的 API	可以继续使用 Vue 2.x 的代码，但无法充分利用 Composition API
社区支持	相对较小，支持正在增长	大型且活跃的社区，有大量资源和文档

需要根据具体项目需求和技术栈来选择适合的状态管理工具，如果你使用的是 Vue 3，并希望在项目中充分利用 Composition API 的优势，则 Pinia 是一个很好的选择。但如果你使用的是 Vue 2.x 或已有项目中已经使用了 Vuex，并且依赖于 Vuex 的插件和生态系统，那么继续使用 Vuex 可能更加方便。

vue2和vue3对比

下表列出了 Vue 2 和 Vue 3 之间的几个关键区别：

功能	Vue 2	Vue 3
响应式系统	基于 Object.defineProperty	基于 Proxy
组件 API	选项式 API（Options API）	组合式 API（Composition API）
数据追踪	对象属性需要提前声明	自动追踪响应式数据变化，无需提前声明
Teleport 组件	不支持	支持
Fragment 组件	不支持	支持
静态节点提升	不支持	支持
编译器	vue-loader + vue-template-compiler	@vue/compiler-sfc
Tree-shaking	有限支持	更好的支持和优化
性能优化	较低的性能	更高的性能，包括更快的渲染速度和更小的bundle大小
TypeScript 支持	有限支持	更好的支持，在类型推断和编辑器支持方面更加强大
插件生态圈	成熟且活跃	正在逐渐发展，但相对较小
反应式 API	不支持	支持
Fragment API	不支持	支持
静态递增（静态属性）	不支持	支持
V-model 修饰符	不支持	支持
过渡和动画	transition 和 transition-group	transition 和 animation

需要根据具体项目需求和迁移成本来选择使用 Vue 2 还是 Vue 3。如果你正在开始一个新项目或者准备对现有项目进行升级，并且希望使用更好的性能、TypeScript 支持和更强大的组合式 API，那么选择 Vue 3 是一个很好的选择。但如果你的项目已经在 Vue 2 上运行并且没有迫切需要升级，或者项目依赖于 Vue 2 上的一些特性和插件，那么继续使用 Vue 2 也是可行的。

使用axios封装一个底层请求拦截器

以下是使用 Axios 封装一个底层请求拦截器的示例代码：

import axios from 'axios';

// 创建一个 Axios 实例
const instance = axios.create({
  baseURL: 'https://api.example.com', // 设置基础 URL
  timeout: 5000 // 设置超时时间
});

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在发送请求之前做一些处理，比如添加请求头等
    config.headers['Authorization'] = 'Bearer token'; // 设置请求头 Authorization

    return config;
  },
  error => {
    // 处理请求错误
    console.error('请求拦截器发生错误:', error);
    return Promise.reject(error);
  }
);

// 响应拦截器
instance.interceptors.response.use(
  response => {
    // 对响应数据进行处理，可以根据需要进行统一处理或者解析数据
    return response.data;
  },
  error => {
    // 处理响应错误
    console.error('响应拦截器发生错误:', error);
    return Promise.reject(error);
  }
);

export default instance;

在上述代码中，我们使用 Axios 的 create 方法创建了一个实例，然后通过 interceptors 属性分别设置了请求拦截器和响应拦截器。在请求拦截器中，我们可以对请求配置进行修改，比如添加请求头等；而在响应拦截器中，我们可以对响应数据进行处理，比如统一处理错误信息或者解析返回的数据。

你可以根据实际需求对拦截器进行扩展和定制，比如添加错误处理、身份验证等功能。使用封装好的实例发送请求时，拦截器会自动起作用，方便统一管理和处理请求与响应。

附录：前后端实战项目（简历必备） 推荐：★★★★★

Vue.js 和 Egg.js 开发企业级健康管理项目
带你从入门到实战全面掌握 uni-app