Add authentication support with login/logout UI

- Introduced AuthService, IAuthApiClient, and AuthApiClient for managing authentication state and API calls (login, logout, session restore).
- Added Login.razor and LoginLayout.razor for the login page, including styling and logic.
- MainLayout.razor now checks authentication on load, restores sessions from sessionStorage, and redirects to /login if unauthenticated. Displays username and logout button when logged in.
- Implemented JS interop (authStorage) for persisting authentication info in sessionStorage.
- Registered AuthService, CookieContainer, and API clients in Program.cs to share cookies and support authentication.
- Updated AppSettings and appsettings files to support separate ApiBaseUrl and DataApiBaseUrl.
- Minor CSS improvements for username display in the top bar.
This commit is contained in:
OlgunR
2026-05-12 16:32:46 +02:00
parent 45011122b2
commit 1ad267e409
13 changed files with 462 additions and 11 deletions

View File

@@ -2,6 +2,9 @@
@implements IDisposable
@inject ThemeState ThemeState
@inject IJSRuntime JS
@inject AuthService AuthService
@inject IAuthApiClient AuthApiClient
@inject NavigationManager Navigation
<div class="page @(ThemeState.IsDarkMode ? "app-dark" : "app-light") @(ThemeState.IsNativeDarkTheme ? "native-dark" : "")">
<div class="sidebar">
@@ -18,11 +21,29 @@
<DxButton Text="@(ThemeState.IsDarkMode ? "Dark Mode aus" : "Dark Mode an")"
Click="ToggleTheme" />
</span>
@if (AuthService.IsAuthenticated)
{
<span class="ms-auto d-flex align-items-center gap-2">
<span class="top-row-username">@AuthService.UserName</span>
<DxButton Text="Abmelden"
Click="LogoutAsync"
RenderStyle="ButtonRenderStyle.Secondary" />
</span>
}
<a href="https://learn.microsoft.com/aspnet/core/" target="_blank">About</a>
</div>
<article class="content px-4">
@Body
@if (_checkingAuth)
{
<div class="loading-container">
<span>Wird geladen…</span>
</div>
}
else
{
@Body
}
</article>
</main>
</div>
@@ -35,10 +56,12 @@
@code {
private bool _isInteractive;
private bool _checkingAuth = true;
protected override void OnInitialized()
{
ThemeState.OnChange += OnThemeChanged;
AuthService.OnChange += OnAuthChanged;
}
protected override async Task OnAfterRenderAsync(bool firstRender)
@@ -46,17 +69,71 @@
if (firstRender)
{
_isInteractive = true;
if (!AuthService.IsAuthenticated)
{
try
{
var username = await JS.InvokeAsync<string?>("authStorage.get", "auth_user");
var cookie = await JS.InvokeAsync<string?>("authStorage.get", "auth_cookie");
if (!string.IsNullOrEmpty(username) && !string.IsNullOrEmpty(cookie))
{
var restored = await AuthApiClient.RestoreAsync(username, cookie);
if (!restored)
{
await JS.InvokeVoidAsync("authStorage.clear");
Navigation.NavigateTo("/login", replace: true);
return;
}
}
else
{
Navigation.NavigateTo("/login", replace: true);
return;
}
}
catch
{
Navigation.NavigateTo("/login", replace: true);
return;
}
}
_checkingAuth = false;
StateHasChanged();
}
await ApplyDxDarkOverrideAsync();
}
private async Task LogoutAsync()
{
try
{
await AuthApiClient.LogoutAsync();
await JS.InvokeVoidAsync("authStorage.clear");
}
catch
{
// Fehler beim Abmelden ignorieren, trotzdem weiterleiten
}
Navigation.NavigateTo("/login", replace: true);
}
private void OnAuthChanged()
{
InvokeAsync(StateHasChanged);
}
private void OnThemeChanged()
{
InvokeAsync(async () =>
{
StateHasChanged();
if (_isInteractive)
await ApplyDxDarkOverrideAsync();
await ApplyDxDarkOverrideAsync();
});
}
@@ -82,5 +159,6 @@
public void Dispose()
{
ThemeState.OnChange -= OnThemeChanged;
AuthService.OnChange -= OnAuthChanged;
}
}