目录
1. JWT 登录并存储到 localStorage
2. 读取 JWT
3. 删除 JWT（用户退出）
4. 修改 JWT
5. 处理 JWT 过期
总结
在使用 JWT（JSON Web Token）进行身份验证时，除了生成和存储 JWT，还需要处理读取、删除和修改 JWT 的操作，以支持用户的登录、退出和令牌更新功能。以下是完善的示例代码和实现步骤。
1. JWT 登录并存储到 localStorage
首先生成 JWT 并将其存储到浏览器的 localStorage 中。
async Task login()
{if (AtsDAO.userLogin(userName, password)){// 假设 JwtHelper.GenerateToken 会根据用户名生成 JWTvar token = JwtHelper.GenerateToken(userName); // 将 token 存储到 localStorageawait js.InvokeVoidAsync("localStorage.setItem", "authToken", token);// 导航到成功页面NavigationManager.NavigateTo("/?token=loginsuccess", true);}else{await alert("用户名或密码错误！");}
}2. 读取 JWT
要从 localStorage 中读取 JWT，可以使用 JavaScript 通过 IJSRuntime 调用来实现。
async Task<string> GetAuthToken()
{// 从 localStorage 读取 authTokenreturn await js.InvokeAsync<string>("localStorage.getItem", "authToken");
}这段代码可以在 API 请求中使用，将令牌附加到 Authorization header 中进行身份验证。例如：
async Task<HttpResponseMessage> MakeApiRequest()
{var token = await GetAuthToken();if (!string.IsNullOrEmpty(token)){var client = new HttpClient();client.DefaultRequestHeaders.Authorization = new System.Net.Http.Headers.AuthenticationHeaderValue("Bearer", token);return await client.GetAsync("https://your-api-endpoint");}return null;
}3. 删除 JWT（用户退出）
当用户退出时，可以通过移除 localStorage 中的 authToken 来销毁 JWT：
async Task Logout()
{// 从 localStorage 移除 authTokenawait js.InvokeVoidAsync("localStorage.removeItem", "authToken");// 导航到登录页面或主页NavigationManager.NavigateTo("/login", true);
}4. 修改 JWT
在某些情况下，你可能需要更新 JWT（例如令牌过期后）。可以通过以下方式修改 localStorage 中的 authToken：
async Task UpdateAuthToken(string newToken)
{// 更新 localStorage 中的 authTokenawait js.InvokeVoidAsync("localStorage.setItem", "authToken", newToken);
}5. 处理 JWT 过期
为了处理 JWT 过期问题，你可以在前端添加检查逻辑，解析令牌并验证其是否过期。可以使用 JavaScript 解析 JWT 并检查其 exp 字段（过期时间）：
function isTokenExpired(token) {const payload = JSON.parse(atob(token.split('.')[1]));const exp = payload.exp * 1000; // exp 是秒，需要转换为毫秒return Date.now() >= exp;
}在 Blazor 中调用这个 JavaScript 函数：
async Task<bool> IsAuthTokenExpired()
{var token = await GetAuthToken();return await js.InvokeAsync<bool>("isTokenExpired", token);
}总结
以上代码展示了如何通过 JWT 实现用户登录、读取、修改和删除令牌的功能。通过将令牌存储在 localStorage 或 sessionStorage 中，可以实现无状态的用户认证，并在每次请求中附加令牌进行身份验证。
