「JWT + localStorage 登录鉴权机制」前后端分离的通关秘籍（附实战代码）

多啦C梦a
139 阅读3分钟

本文适合刚入坑 React 或前端安全的小伙伴。从登录表单 -> 拿到 JWT -> 存入 localStorage -> 请求带 token -> 后端校验，一步步帮你构建一套完整登录鉴权流程。

一、为什么要登录鉴权？

一句话：你总得让服务器知道你是谁吧！

前端项目里，如果你想让用户登录后访问“我的订单”、“用户信息”这种私人定制页面，就必须要有一套 身份验证 + 鉴权机制。

常见方案有两种：

  1. Cookie + Session（传统模式）
  2. JWT + localStorage（前后端分离专用）

本文主角就是后者：JWT + localStorage！

二、JWT 是啥？

JWT，全称 JSON Web Token，是一种服务端颁发的“身份证”。

它长这样：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.
eyJ1c2VyIjp7ImlkIjoiMDAxIiwidXNlcm5hbWUiOiJhZG1pbiJ9LCJleHAiOjE3NTMyMjQ0MDB9.
w83KYY4Fv1ybGfPSiYHDe3J9UtrYgskD70eZq56slJY

由三部分组成（用 . 分割）：

部分内容说明
Header说明加密算法，例如 HS256
Payload用户信息（例如 id、username）
Signature签名（防止你自己伪造 token）

你一登录，后端就会用 jwt.sign() 发你一张“令牌”。

三、后端代码模拟（Mock 登录）

我们先来个 mock 登录接口，输入用户名密码 → 颁发 token：

import jwt from 'jsonwebtoken'

const secret = '!@#$%^&*()_+'

export default [
  {
    url: '/api/login',
    method: 'post',
    response: ({ body }) => {
      const { username, password } = body
      if (username !== 'admin' || password !== '123456') {
        return { code: 1, message: '用户名或密码错误' }
      }
      const token = jwt.sign(
        {
          user: { id: '001', username: 'admin' }
        },
        secret,
        { expiresIn: 86400 }
      )
      return {
        code: 0,
        token
      }
    }
  }
]

四、前端如何拿 token 并保存？

拿到 token 后我们干两件事：

✅ 1. 存到 localStorage：

localStorage.setItem('token', res.data.token)

✅ 2. 下次请求自动带上它（axios 拦截器）：

import axios from 'axios'

axios.defaults.baseURL = 'http://localhost:5173/api'

axios.interceptors.request.use(config => {
  const token = localStorage.getItem('token')
  if (token) {
    config.headers.Authorization = `Bearer ${token}`
  }
  return config
})

每次 axios 发请求，就会带上这句话：

Authorization: Bearer xxxxxx

五、后端怎么验证你是不是自己人？

我们模拟一个 /api/user 接口，专门验证 token：

{
  url: '/api/user',
  method: 'get',
  response: (req) => {
    const token = req.headers["authorization"]?.replace('Bearer ', '')
    try {
      const decode = jwt.verify(token, secret)
      return {
        code: 0,
        data: decode.user
      }
    } catch {
      return {
        code: 1,
        message: 'token 无效或已过期'
      }
    }
  }
}

后端拿你的 token：

  • 一看签名对不对（没被篡改）
  • 二看是否过期
  • 三看你是不是 admin！

六、localStorage 有什么坑？

虽然 localStorage 用起来很香，但也有几个注意点：

1. 它无法防止 XSS

一旦你被 XSS 注入脚本，localStorage 里的 token 就容易被窃取。

所以一定要防止 XSS，比如：

  • 所有用户输入必须 escape
  • 页面不要直接插入 HTML
  • 使用 CSP 安全策略

2. 无法自动发送（不像 cookie）

每次都得我们手动写拦截器带 token（幸好 axios 拦截器能解决）

七、localStorage 和 cookie 的对比？

特性localStoragecookie
存储大小大约 5MB4KB
生命周期永久除非主动删过期时间控制
是否自动发送❌ 手动发送✅ 自动随请求发送
安全性容易 XSS容易 CSRF
使用场景前后端分离 Token传统登录 Session

八、最后我们来总结一下

✅ JWT + localStorage 登录鉴权流程：

用户输入用户名密码 → 登录接口 → 生成 token → 存 localStorage
↓
axios 请求时自动带上 token
↓
后端验证 token（解密 + 校验）
↓
返回用户信息

九、彩蛋：你可以把 token 放在别的地方吗？

当然可以！

  • sessionStorage：刷新就没了，适合临时登录
  • cookie + HttpOnly：配合后端更安全（防 XSS）
  • 内存中变量：刷新就没了，最安全也最不持久

十、最后

这就是前后端分离中最常见也最实用的鉴权方案：JWT + localStorage。它简单、灵活、适配 React/Vue 等现代框架。

如果你觉得本文对你有帮助，欢迎点赞 + 收藏，让更多小伙伴也能学会这招！

avatar
文章
阅读
粉丝