Blazor WebAssembly 401 即使我已获得授权也未获得授权

Question

我正在使用Blazor WebAssembly Asp.Net Core hosted PWA并将其集成AspNetCore.Identity到其中。我AuthenticationStateProvider在客户端创建了 ，现在我想允许用户访问需要授权的控制器。

我已经通过邮递员进行了测试，用户已aspnetusers使用正确的凭据创建并存储在数据库中。登录/帐户控制器按我想要的方式工作。

当用户被授权时，它会在访问授权控制器请求时在浏览器中告知此异常：

Microsoft.AspNetCore.Components.WebAssembly.Rendering.WebAssemblyRenderer[100] 渲染组件未处理的异常：响应状态代码不指示成功：401（未经授权）。System.Net.Http.HttpRequestException：响应状态代码不指示成功：401（未经授权）。

Startup.cs（ConfigureServices-方法）：

...
    serviceCollection.AddDbContext<SQLiteTestDbContext>(options =>
                {
                    options.UseSqlite(config["ConnectionStrings:SQLiteTestConnection"]);
                });
                serviceCollection.AddDefaultIdentity<IdentityUser>()
                    .AddEntityFrameworkStores<SQLiteTestDbContext>()
                    .AddDefaultTokenProviders();

    services.AddAuthentication(x =>
                    {
                        x.DefaultAuthenticateScheme = JwtBearerDefaults.AuthenticationScheme;
                    })
                    .AddJwtBearer(options =>
                    {
                        options.TokenValidationParameters = new TokenValidationParameters
                        {
                            ValidateIssuer = true,
                            ValidateAudience = true,
                            ValidateLifetime = true,
                            ValidateIssuerSigningKey = true,
                            ValidIssuer = Configuration["JwtIssuer"],
                            ValidAudience = Configuration["JwtAudience"],
                            IssuerSigningKey = new SymmetricSecurityKey(Encoding.UTF8.GetBytes(Configuration["JwtSecurityKey"]))
                        };
                    });

    services.AddHttpContextAccessor();
                services.Configure<IdentityOptions>(options =>
                    options.ClaimsIdentity.UserIdClaimType = ClaimTypes.NameIdentifier);
...

 

    public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    {
      
    ...
        app.UseAuthentication();
        app.UseAuthorization();
    ...
    }

Program.cs 客户端

    public static async Task Main(string[] args)
            {
                var builder = WebAssemblyHostBuilder.CreateDefault(args);
                builder.RootComponents.Add<App>("app");
                builder.Logging.SetMinimumLevel(LogLevel.Warning);
    
                //Registering Shared-Library models
                builder.Services.AddScoped<ObjectModel>();

                builder.Services.AddBlazoredLocalStorage();
                builder.Services.AddAuthorizationCore();
                builder.Services.AddScoped<AuthenticationStateProvider, ApiAuthenticationStateProvider>();
                builder.Services.AddScoped<IAuthService, AuthService>();
    
                //Registered BlazorContextMenu Service
                builder.Services.AddBlazorContextMenu();
    
                //Registering FileReader service, for image upload -> Azure
                builder.Services.AddFileReaderService(options => options.UseWasmSharedBuffer = true);
                builder.Services.AddTransient(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
    
                await builder.Build().RunAsync();
            }

我的控制器具有授权属性：

    [Authorize(AuthenticationSchemes = JwtBearerDefaults.AuthenticationScheme)]
        [Route("api/[controller]")]
        [ApiController]
        public class ObjectController : ControllerBase
        {
....
    

Answer 1

笔记：

1. 当您的用户尝试访问客户端上受保护（用授权属性注释）页面时，他应该首先登录或注册。

2. 为了注册，他应该被重定向到一个帐户控制器，您应该在其中创建一个新用户，并将其添加到数据库中（您说您“将 AspNetCore.Identity 集成到其中”），这很好......并且应该用于验证和验证用户的身份。您的帐户控制器还应该生成一个 Jwt 令牌，该令牌应传递给客户端应用程序，并存储在本地存储中。

3. 现在，每当您的用户尝试访问 Web Api 端点上的受保护资源时，您都应该从本地存储中检索 Jwt 令牌，并将其添加到请求标头中。如果您这样做，未经授权的响应将成为过去。

4. 自定义 AuthenticationStateProvider 是一个好地方，您可以在其中管理将 Jwt 令牌存储在本地存储中，并为出站 HTTP 请求调用检索它。

以下是一些示例代码，用于阐明您应该做什么：

@code {
    WeatherForecast[] forecasts;

    protected override async Task OnInitializedAsync()
    {
        var token = await TokenProvider.GetTokenAsync();
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>(
            "api/WeatherForecast",
            new AuthenticationHeaderValue("Bearer", token));
    }
}

注意：TokenProvider 是一个自定义的 AuthenticationStateProvider，它定义了一个名为 GetTokenAsync 的方法，该方法提供（从本地存储读取 Jwt 令牌并将其传递给调用代码）Jwt 令牌

希望这可以帮助...