前端学习笔记

前言：最近在学习前端补齐我的软件技能树，最近简单总结一下

1、学习路线

基本：vue3、ts(js)、 vite、eslint、css(动画、布局)

依赖包：vue-router、vue-i18n、store(pinio)、axios、ui组件（elementPlus、Angular、Ant Design）

网络相关： cookie/session/token/storage

架构： 微前端、缓存架构

进阶：websocket、跨标签页/组件数据共享

学习脉络是找个成熟的系统，你就按照自己的思路去实现一遍，然后对比思考总结

2、token的安全储存方案

cookie:

将token存储在cookie中是一种常见的做法。这种方式的优点是，即使在浏览器关闭后，cookie仍然存在，因此用户可以保持登录状态。然而，cookie的缺点是容易受到CSRF（跨站请求伪造）攻击。

localstorage:

将token存储在localStorage中的优点是，即使在浏览器关闭后，localStorage中的数据仍然存在，因此用户可以保持登录状态。此外，localStorage中的数据可以在同一浏览器的所有标签页和窗口中共享。然而，localStorage的缺点是容易受到XSS（跨站脚本）攻击。

sessionstorage:

将token存储在sessionStorage中的优点是，它只在当前会话中存在，当用户关闭浏览器后，sessionStorage中的数据将被清除。这种方式的缺点是，如果用户在浏览器中打开新的标签页或窗口，那么新的页面将无法访问sessionStorage中的数据

总的来说，将token存储在哪里取决于你的应用需求。如果你的应用需要在用户关闭浏览器后保持登录状态，那么你可以选择将token存储在cookie或localStorage中。如果你的应用需要在用户关闭浏览器后清除token，那么你可以选择将token存储在sessionStorage中。

3、跨域

3.1 response的Header设置了set-Cookie参数为什么没有生效？

需要设置以下cookie的参数类型：

onlyHttp: false

Secure: false

如果后台指定了domain，那么需要跟当前访问的域名是一样的， 而且127.0.0.1跟localhost也是不一样的

4、相关的学习链接

• vue3入门-菜鸟教程

• vite官方中文文档

• element组件

• eslint中文文档

• Cookie 后端在Response中addCookie无效(请求中已有Set-Cookie)

• token 应该存在 Cookie、SessionStorage 还是 LocalStorage 中？