先聊聊 JWT 是啥玩意儿

说实话，JWT听起来高大上。

其实它就是一个装满用户信息的“签名小纸条”。

服务器给你签好名，你拿着它去后端要资源。

后端一验签，立马知道你是谁。

哈，这玩意儿无状态，省得在服务器里存 Session。

登录流程：从表单到 Token 的奇妙旅程

前端页面里用户敲一下用户名、密码。

点个登录按钮，POST /api/auth/login 把数据甩过去。

后端先查库，bcrypt.compare 对比哈希密码。

对了对比成功就走到生成 Token 的环节。

我们会把用户 ID、昵称塞进 payload，jwt.sign 用密钥给它盖章。

一般会一次签两张：access_token和refresh_token。

然后把这俩 token 响应回前端，前端把它们放进 Zustand Store 或者 localStorage。

前端怎么玩转 JWT

先说个小技巧：别每次请求dou手动加 Header，直接写拦截器。

axios.interceptors.request.use(config => {
  const token = useUserStore.getState.accessToken;
  if  {
    config.headers.Authorization = `Bearer ${token}`;
  }
  return config;
});

这么一弄，所有请求dou会自动带上 token，省事儿！

Token 过期怎么办？刷新机制来救场

access_token 一般只活几分钟——安全第一嘛。

要是请求被拒了拦截器捕获后用 refresh_token 去 /api/auth/refresh 换新 token。

刷新成功后再把新 token 放回 Store，随后重试原来的请求。

整个过程对用户是透明的——“我根本没感知到 token 刷新”。哈哈，这才是体验感啊。

注册模块：从零到有的完整闭环

注册其实跟登录差不多，只是多了个“创建账号”。

前端收集用户名、密码、确认密码，一起 P​OST /api/users/register

async register {
  const res = await axios.post;
  // 注册成功直接登录
  await this.login;
}

后端收到 DTO 后用校验管道确保字段合法，然后：

bcrypt.hash: 把明文密码变成不可逆的哈希；

P​Risma/ORM 插入记录: 返回 id、name，不返回密码；

- 返回成功信息或直接走登录流程 -

"为什么百度不收录"这个问题顺手答一下吧！

# 为什么百度不收录？#

A：大多数情况下是因为页面缺少有效的 meta 信息或者 robots.txt 把爬虫拦住了。

B：还有一种情况是内容太“轻”，搜索引擎觉得价值不高，就不给收录啦。

C：Ru果是单页应用，没有Zuo好 SSR 或 pre‑render，也会导致爬虫抓不到真实 HTML。哈哈，这些dou是常见坑呀！懂了吗？你懂的~

安全细节：别让黑客偷走你的 Token！

# 密码安全 #

bcrypt 盐轮次建议>=12；即使数据库泄露，也难破解；

D​atabase 查询只返回必要字段，用 { select: { id:true, name:true } };

D​TO 白名单 + forbidNonWhitelisted 防止奇怪字段进来；

# Token 安全 #

S​hort‑lived access_token+L​ong‑lived refresh_token

S​ignature 使用 HS256 或 RS256，密钥严保管； I​gnoreExpiration 必须 false，让过期 token 自动被拒绝； E​very refresh 同时颁发新 access + refresh，实现滚动geng新，旧 token 立即失效。 AOP kankan后端守卫怎么配合前端路由守卫一起工作：

@Controller
@UseGuards
@Get
async getMyPosts req) {
  // req.user Yi经是经过 JwtStrategy 验证后的对象
  return this.postsService.findByUser;
}

Application 路由守卫：

useEffect => {
  if ) {
    navigate;
    // 未登录直接跳转，不让页面空白报错
  }
}, );

P.S. 常见误区大盘点 🚀

- 前端路由守卫足够安全？不对不对，它只Neng提升 UX，真正的安全必须靠后端 Guard！咱就是说…别忘了！;

- JWT Ke以无限期使用？错！一定要配合 refresh 并且在服务端实现失效策略，否则风险太大。;

- 把 JWT 放在 localStorage 就万无一失？其实 XSS 攻击仍Neng窃取，要么用 httpOnly Cookie，要么Zuo好 CSP 防护。;

- 密钥硬编码在代码里Ke以吗？当然不Neng！Zui好放在环境变量或 secret manager 中。;

- 多次刷新就会生成无限多的 Refresh Token？记得在刷新时废弃旧的，仅保留Zui新一个。;

- “我只要一个 access_token 就行”，结果忘记处理失效导致频繁弹窗登陆……害，这种事常见啊。;

- 忘记给 token 设置 aud、iss 等声明字段，会导致跨系统滥用。加上这些元信息geng保险哦。;

- “我Yi经用了 HTTPS，还需要Zuo什么？”——别忘了开启 HSTS 防止降级攻击。; 哈哈，这些细节往往决定系统到底稳不稳。; 不对不对，其实Zui重要的是保持代码审计和依赖升级。; 嗯，说实话，只要你坚持这些原则，你的登录注册模块基本就算完美啦！.

end of story 🎉 —— 给你的小伙伴们一点温暖的话语：

写完这篇，我感觉自己像刚刚帮老朋友搬家一样轻松，又有点小自豪感——毕竟把这么多干货装进短句里可不容易呀！哈哈~ Ru果你kan到这里还Neng保持清醒，那说明你的脑子还没被技术细节碾压掉 😆 。祝你的项目顺风顺水，Ru果卡住了就想想这篇随性的笔记吧——随时来找我唠嗑~ 加油！🧡

---