身份认证确认用户身份，授权控制用户权限。通过用户名密码或第三方登录认证后，使用JWT存储用户信息并携带Token进行后续请求；前端根据角色动态展示UI，但关键权限校验须在后端完成。建议使用HttpOnly Cookie存储Token、设置合理过期时间与refresh token机制、传输全程启用HTTPS，避免敏感信息写入JWT，确保系统安全。
身份认证与授权是Web应用安全的核心部分，尤其在使用JavaScript开发前后端应用时尤为重要。身份认证（Authentication）确认用户是谁，授权（Authorization）决定用户能做什么。两者结合，确保系统资源被合法访问。
身份认证：确认用户身份
身份认证的目的是验证用户是否是其所声称的人。常见方式包括：
- 用户名密码登录：最基础的方式，前端通过表单收集凭证，发送到后端验证。
- 第三方登录：如Google、GitHub、微信等OAuth服务，减少用户注册成本。
- JWT（JSON Web Token）：登录成功后，服务器生成一个包含用户信息的加密Token，返回给客户端存储（通常放在localStorage或cookie中），后续请求携带该Token进行身份识别。
在JavaScript中，登录流程通常如下：
fetch('/api/login', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ username, password })
})
.then(res => res.json())
.then(data => {
if (data.token) {
localStorage.setItem('token', data.token);
// 跳转或更新UI
}
});
之后每次请求都需附带Token：
立即学习“Java免费学习笔记（深入）”；
headers: {
'Authorization': `Bearer ${localStorage.getItem('token')}`
}
授权：控制用户权限
授权发生在认证之后，用于判断已认证用户是否有权执行某项操作。常见策略有：
- 基于角色的访问控制（RBAC）：用户拥有角色（如admin、user），不同角色可访问不同接口或页面。
- 基于权限的控制：更细粒度，直接分配“删除文章”、“查看报表”等具体权限。
JWT中可包含用户角色或权限信息：
{
"userId": "123",
"role": "admin",
"exp": 1735689600
}
前端可根据角色动态控制UI显示：
if (userRole === 'admin') {
showDeleteButton();
}
但注意：前端控制仅为体验优化，所有关键权限校验必须在后端进行。
安全建议与最佳实践
- 避免将敏感信息存入JWT payload：JWT仅签名不加密（除非使用JWE），内容可被解码。
- 使用HttpOnly Cookie存储Token：比localStorage更防XSS攻击。
- 设置合理的Token过期时间：配合refresh token机制提升安全性与用户体验。
- 后端每次关键操作都应验证权限：不能依赖前端隐藏按钮就认为安全。
- 使用HTTPS：防止Token在传输过程中被窃取。
基本上就这些。认证和授权看似复杂，但核心逻辑清晰：先确认你是谁，再看你能不能做。用好JWT、合理设计角色权限，再配合前后端协同防护，就能构建出安全可靠的系统。
