揭秘JWT身份验证：.NET Core与Vue.js的完美融合

JWT（JSON Web Token）是一种开放标准（RFC 7519）定义的方式，用于在网络通信的双方之间安全地传输信息。这些信息可以被验证和信任，因为它们是数字签名的。JWT 通常用于身份验证和授权，因为一旦用户登录，JWT 就会发送给客户端，并在后续请求中附带，以验证用户的身份。

下面是一个简单的步骤说明，如何在.NET Core后台和Vue.js前端实现JWT身份验证。

一、.NET Core后台

1. 安装必要的NuGet包

你需要安装
Microsoft.AspNetCore.Authentication.JwtBearer和
System.IdentityModel.Tokens.Jwt包。

bashdotnet add package Microsoft.AspNetCore.Authentication.JwtBearerdotnet add package System.IdentityModel.Tokens.Jwt

2. 配置JWT

在Startup.cs的ConfigureServices方法中配置JWT。

csharppublic void ConfigureServices(IServiceCollection services){    services.AddAuthentication(options =>    {        options.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;        options.DefaultChallengeScheme = JwtBearerDefaults.AuthenticationScheme;    })    .AddJwtBearer(options =>    {        options.TokenValidationParameters = new TokenValidationParameters        {            ValidateIssuer = true,            ValidateAudience = true,            ValidateLifetime = true,            ValidateIssuerSigningKey = true,            ValidIssuer = "your_issuer", // 例如: https://yourdomain.com            ValidAudience = "your_audience", // 例如: https://yourdomain.com/users            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("your_secret_key")) // 你的密钥        };    });    services.AddControllers();}

3. 中间件配置

在Startup.cs的Configure方法中，确保添加了身份验证中间件。

csharppublic void Configure(IApplicationBuilder app, IWebHostEnvironment env){    if (env.IsDevelopment())    {        app.UseDeveloperExceptionPage();    }    app.UseRouting();    app.UseAuthentication(); // 身份验证中间件    app.UseAuthorization();    app.UseEndpoints(endpoints =>    {        endpoints.MapControllers();    });}

4. 生成JWT

在你的登录方法中，当用户验证成功后，生成JWT并返回给客户端。

csharp[HttpPost("login")]public async Task<IActionResult> Login([FromBody] LoginModel model){    // 验证用户名和密码...    var tokenHandler = new JwtSecurityTokenHandler();    var key = new SymmetricSecurityKey(Encoding.UTF8.GetBytes("your_secret_key"));    var tokenDescriptor = new SecurityTokenDescriptor    {        Subject = new ClaimsIdentity(new[] { new Claim(ClaimTypes.Name, model.Username) }),        Expires = DateTime.UtcNow.AddDays(7),        SigningCredentials = new SigningCredentials(key, SecurityAlgorithms.HmacSha256Signature)    };    var token = tokenHandler.CreateToken(tokenDescriptor);    var tokenString = tokenHandler.WriteToken(token);    return Ok(new { token = tokenString });}

二、Vue.js前端

1. 安装axios

如果你还没有安装axios，可以使用npm或yarn进行安装。

bashnpm install axios

2. 发送登录请求并存储JWT

在登录时，发送请求到后台并获取JWT，然后将其存储在localStorage或sessionStorage中。

javascriptaxios.post('/api/login', { username: 'your_username', password: 'your_password' })  .then(response => {    const token = response.data.token;    localStorage.setItem('user-token', token); // 存储token    // ...其他逻辑，例如导航到首页等  })  .catch(error => {    console.error(error);    // ...错误处理逻辑  });

3. 在每个请求中添加JWT

你可以使用axios的拦截器功能，在每个请求中添加JWT。

javascriptaxios.interceptors.request.use(  config => {    const token = localStorage.getItem('user-token');    if (token) {      config.headers['Authorization'] = `Bearer ${token}`;    }    return config;  },