前端学习笔记

文章目录

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

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、相关的学习链接

相关推荐
脑袋大大的33 分钟前
判断当前是否为钉钉环境
开发语言·前端·javascript·钉钉·企业应用开发
军军君0142 分钟前
基于Springboot+UniApp+Ai实现模拟面试小工具二:后端项目搭建
前端·javascript·spring boot·spring·微信小程序·前端框架·集成学习
Wy. Lsy1 小时前
Kotlin基础学习记录
开发语言·学习·kotlin
The_Killer.1 小时前
格密码--数学基础--06对偶空间与对偶格
学习·线性代数·密码学
quweiie1 小时前
tp8.0\jwt接口安全验证
前端·安全·jwt·thinkphp
Andy杨1 小时前
20250712-1-Kubernetes 监控与日志管理-K8s日志管理与维护_笔记
笔记·容器·kubernetes
xiaoyan20152 小时前
最新Flutter3.32+Dart3仿微信App聊天实例
前端·flutter·dart
撰卢2 小时前
【个人笔记】负载均衡
运维·笔记·负载均衡
汪敏wangmin2 小时前
Fiddler-抓包后直接生成Loadrunner脚本或者Jmeter脚本
前端·jmeter·fiddler
栈溢出了3 小时前
MyBatis实现分页查询-苍穹外卖笔记
java·笔记·mybatis