统一身份认证系统
小明: 嘿，小红，最近学校要上线一个新系统，需要我们前端团队与后端一起合作实现统一身份认证功能。你对这个有什么想法吗？
小红: 当然有！统一身份认证可以极大地简化用户的登录体验，尤其是在校园这样一个用户群体相对固定的环境中。我们可以利用OAuth或JWT这样的技术来实现。
小明: 那具体我们应该怎么做呢？
小红: 我们可以采用JWT（JSON Web Tokens）来实现。首先，我们需要一个后端服务来处理用户的登录请求，并返回JWT。然后，前端在接收到这个令牌之后，可以将其存储在localStorage或者sessionStorage中。
小明: 明白了。那前端怎么验证这个令牌的有效性呢？
小红: 对于每个请求，前端都需要将JWT附加到HTTP头中的Authorization字段上，例如："Authorization": "Bearer <token>"。后端在接收到请求时会验证这个令牌，如果有效则允许访问资源。
小明: 非常好！那你能给我一些代码示例吗？
// 假设我们已经从后端获取到了JWT token
const token = 'your.jwt.token';
// 将JWT存储在localStorage中
localStorage.setItem('token', token);
// 获取存储的JWT并用于设置HTTP头
const getTokenFromLocalStorage = () => {
return localStorage.getItem('token');
};
// 创建一个请求函数，自动添加JWT到请求头
const createRequest = (url) => {
return fetch(url, {
headers: {
'Authorization': `Bearer ${getTokenFromLocalStorage()}`
}
});
};
小明: 这样的话，前端就实现了JWT的存储和自动添加到请求头的功能。那如果用户注销了账户，我们该怎么处理JWT呢？
小红: 在用户注销时，我们需要清除本地存储中的JWT。这样，下次尝试访问受保护资源时，由于缺少有效的JWT，用户将被重定向到登录页面。
// 用户注销时清除JWT
localStorage.removeItem('token');
