双token的应用
分析问题（不作为回答答案）
双token的应用一般可以应用于无感token刷新。
实际场景：token过期时间设置比较短的时候，用户登录后很快就会收到401的状态码，然后在响应拦截器中进行路由跳转到登录页面。这个用户体验是不好的。token过期时间又不能设置过长，否则会出现安全问题。
这种场景下提出了无感token刷新的概念。在用户感知不到的情况下，前端已经替换了新的token，保证用户继续访问网站。
回答问题：
双token的应用在项目中一般会用于无感token刷新的功能。用户登录或进行授权后，系统能够在后台自动刷新访问令牌（token）。需要后端来一起配合。才能实现。
具体流程如下：
- 设计用户登录和授权的界面，例如登录表单和授权页面。
- 在用户登录时，通过表单提交用户名和密码到后端登录接口，获取访问令牌和刷新令牌。
- 将访问令牌存储在客户端，通常可以使用本地存储（localStorage）或 cookie。
- 在每个请求中，将访问令牌作为身份验证凭证附加到 HTTP 头部（如 Authorization）。
- 如果访问令牌过期或无效，后端返回特定的错误码，前端捕获该错误并使用刷新令牌请求新的访问令牌。
- 在刷新令牌的请求中，将刷新令牌发送到后端，并根据后端接口逻辑重新生成新的访问令牌和刷新令牌。
如何去封装一个菜单权限
分析问题（不作为回答答案）
权限有很多种：
- 菜单权限：用户登录后，根据用户的角色动态匹配用户访问的资源，可以实现菜单动态渲染。
- 路由权限：用户登录后，可以得到当前用户访问路由信息，并通过框架技术动态添加路由文件
- 页面按钮权限：页面或者按钮的权限，也是登录成功后服务器访问权限列表，我们在进行页面的按钮权限匹配，可以隐藏，也可以禁用。
回答问题
菜单权限在项目开发过程中比较常见。
每个用户的角色不同，对应的资源权限也不同。登录成功后，在前端可以获取当前用户的菜单权限列表。
封装菜单组件，将菜单做成动态渲染，根据传递进去的菜单数据来进行渲染。
因为不知道菜单有多少层级，所以我们一般会采用递归的方式来处理菜单。数据封装微树形结构在进行递归操作。
TS的运行原理
分析问题（不作为回答答案）
TS是JavaScript的超集，拥有es5、es6的所有特性。添加了类型约束、类型检查。
核心点就是研究 TS的类型约束和类型检查、类型推断的流程。
回答问题
TS（TypeScript）是一种静态类型的编程语言，它是 JavaScript 的超集。包含了 es5、es6的所有特性。
JS代码写完了无需编译代码，在浏览器运行的时候直接解释代码。
但是TS是需要经过编译，在将编译后 JS进行运行的。
- 在编译时，TS 编译器会对代码进行类型检查，并在发现类型错误时给出相应的错误提示。这样可以在开发阶段就能够发现潜在的类型错误，提高代码的可靠性和可维护性
- 在编译过程中，TS 编译器会将 TS 代码转换为 JavaScript 代码。这个过程包括词法分析、语法分析、类型检查、转换和代码生成等步骤
- TS 也能够根据上下文自动推断出变量的类型，这称为类型推断。
总结：TS 的底层原理是通过引入静态类型检查和编译过程来增强 JavaScript 的开发体验和代码质量。它通过类型注解和类型推断来检查和推断代码中的类型信息，并将 TS 代码转换为 JavaScript 代码以在运行时执行。
vue3的响应式原理优势
分析问题（不作为回答答案）
vue2的响应式原理采用数据劫持（Object.defineProperty），vue3的响应式原理采用代理（proxy）来实现
主要就是对比这两种方式的优缺点
回答问题
Proxy 可以直接监听整个对象的变化，而不需要遍历对象的每个属性进行劫持。这使得 Vue 3 在处理大型数据对象时具有更高的性能。尤其是复杂数据类型的时候，Vue2数据劫持需要递归完成。实现对每一个属性进行劫持。对于性能消耗还是比较大。
Object.defineProperty实现了对象属性的劫持，但是检测不到属性的新增和删除，也检测不到数组通过下标的方式来操作数据。proxy不存在这个问题。
Vue 3 的响应式系统经过重写和优化，优化了虚拟dom，代码体积也更小。去除了很多vue2的冗余代码。相对来说性能更好一些。
Vue 3 引入了 Composition API（组合式api），使用起来更加灵活，根据业务情况自己按需加载api开发。相比于vue的选项是api具有很好的可读性和可维护性。
vuex和pinia的区别？
分析问题（不作为回答答案）
vuex和pinia都是vue官方推出的状态机。
Vuex 3.x 只适配 Vue 2，而 Vuex 4.x 是适配 Vue 3 的
实际上，Pinia就是Vuex的升级版，官网也说过，Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。很多人也将Pinia称为Vuex5，vuex将不再迭代。
回答问题
而Pinia采用了去中心化的架构，将状态分布在多个模块中，每个模块拥有自己的状态。不需要vuex集中管理所有的状态。
Pinia是一个相对较新的库，较小且更简单。这使得Pinia在一些小型或简单的项目中可能更容易上手，而Vuex则更适合大型和复杂的项目。
在类型安全性方面，Vuex从Vue 2.x版本开始引入了对TypeScript的支持，但需要使用额外的插件来实现类型检查。而Pinia在设计之初就对TypeScript提供了原生的支持，提供了更好的类型推导和类型检查的支持。
Vuex使用了更传统的mutations和actions的方式来修改和处理状态，而Pinia更加倾向于直接操作状态。在pinia中已经没有mutations模块了。
