目录

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 会根据用户名生成 JWT
        var token = JwtHelper.GenerateToken(userName); 
        // 将 token 存储到 localStorage
        await 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 读取 authToken
    return 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 移除 authToken
    await js.InvokeVoidAsync("localStorage.removeItem", "authToken");
    // 导航到登录页面或主页
    NavigationManager.NavigateTo("/login", true);
}

4. 修改 JWT

在某些情况下，你可能需要更新 JWT（例如令牌过期后）。可以通过以下方式修改 localStorage 中的 authToken：

async Task UpdateAuthToken(string newToken)
{
    // 更新 localStorage 中的 authToken
    await 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 中，可以实现无状态的用户认证，并在每次请求中附加令牌进行身份验证。