Blazor：在沒有會話/JWT 令牌時重定向到登錄頁面？

Question

我正在嘗試在 Blazor 中創建一個新應用程序並且正在處理身份驗證。 我正在使用存儲在本地存儲中的 JWT 令牌。 當應用程序加載時，我需要檢查存儲中是否有令牌。 如果是這樣，請將其添加到所有 API 請求的 HTTP 標頭中，如果沒有，則在頁面加載之前重定向到登錄頁面......我在哪里做？ 有多個頁面需要進行此檢查，因此需要在一個位置完成以覆蓋所有頁面。 這應該在啟動中完成嗎？

搜索沒有提供解決方案，因為我是 Blazor 的新手，找到正確的搜索詞有點困難:)

Answer 1

創建一個組件並將其命名為RedirectToLogin.razor ：

@inject NavigationManager Navigation
@code {
    [CascadingParameter]
    private Task<AuthenticationState> AuthenticationStateTask { get; set; }

    protected override async Task OnInitializedAsync()
    {
        var authenticationState = await AuthenticationStateTask;

        if (authenticationState?.User?.Identity is null || !authenticationState.User.Identity.IsAuthenticated)
        {
            var returnUrl = Navigation.ToBaseRelativePath(Navigation.Uri);

            if (string.IsNullOrWhiteSpace(returnUrl))
                Navigation.NavigateTo("YourLoginPath", true);
            else
                Navigation.NavigateTo($"{YourLoginPath}?returnUrl={returnUrl}", true);
        }
    }
}

修改App.razor ：

<Found Context="routeData">
    <AuthorizeRouteView RouteData="@routeData" DefaultLayout="@typeof(HostLayout)">
        <NotAuthorized>
            <RedirectToLogin></RedirectToLogin>
        </NotAuthorized>
    </AuthorizeRouteView>
</Found>

學分轉到：這篇文章

Answer 2

我所做的是編寫自己的 http 服務來做到這一點。

它被稱為 Backend 並且具有這樣的令牌屬性：

    public string ApiToken
    {
        get
        {
            if (!string.IsNullOrEmpty(apitoken))
                return apitoken;

            apitoken = Browser.ReadStorage("apitoken");
            return apitoken;
        }

        set
        {
            Browser.WriteStorage("apitoken", value);
        }
    }

然后在這個類中實現 http 類具有的所有方法，同時注入您的令牌。 例如：

    public async Task<T> GetJsonAsync<T>(string uri)
    {
            this.InProgress = true;
            var result = await http.GetJsonAsync<ServerResult<T>>(uri, this.ApiToken);
            this.InProgress = false;

            if (!result.Success)
            {
                BlazorExtensions.Browser.Alert($"Error: {result.ErrorMessage}");
                return default(T);
            }

            return result.ValueObject;

    }

並且到處使用后端服務來處理您的請求。 對於您的 api 網址也很方便。

編輯對於重定向部分：為簡潔起見，我省略了這一部分，但這是完整的方法：

    public async Task<T> GetJsonAsync<T>(string uri)
    {
        try
        {
            this.InProgress = true;
            var result = await http.GetJsonAsync<ServerResult<T>>(uri, this.ApiToken);
            this.InProgress = false;

            if (!result.Success)
            {
                BlazorExtensions.Browser.Alert($"Error: {result.ErrorMessage}");
                return default(T);
            }

            return result.ValueObject;
        }
        catch (UnauthorizedAccessException)
        {
            this.InProgress = false;
            uriHelper.NavigateTo("/bzr/Logon");
            return default(T);
        }
        catch (Exception e)
        {
            BlazorExtensions.Browser.Alert($"Fout bij http fetch: {e.Message}");
            this.InProgress = false;
            return default(T);
        }
    }

uriHelper只是簡單地注入到構造函數中：

    public IUriHelper uriHelper { get; private set; }

    public Backend(HttpClient httpInstance, IUriHelper uriHelper)
    {
        http = httpInstance;
        this.uriHelper = uriHelper;

猜猜這就是你需要的？

Answer 3

你是什​​么意思Startup ？ 創業班，對吧？

現在 Razor 組件框架沒有應用程序事件循環。 耐心點......它即將到來......同時，為了學習，使用組件事件循環。 通常，您應該將您的 JWT 存儲在本地存儲中，包括有關用戶的數據、他是否已通過身份驗證等，以及檢索此數據以確定用戶是否已通過身份驗證的服務。 您可以在需要身份驗證（或授權）時調用此服務。

順便說一句，您並不是要通過說“ before the page loads ”來停止...的過程。 您只是說您不希望顯示“新個人資料頁面”，例如在在線約會網站中，如果用戶未通過身份驗證，對嗎？ 那么，在這種情況下，從頁面（組件）的 OnInit 或 OnInitAsync 方法調用身份驗證本地服務（從本地存儲檢索數據）。

希望這可以幫助...

Answer 4

一個解決方案（目前，我認為不是最好的？）是為所有組件頁面創建一個基類，以繼承和覆蓋 OnInit 方法來執行檢查和重定向。 在應用程序加載后導航到鏈接時，這也適用。

app.cshtml 組件中的檢查僅適用於初始啟動，而不適用於在應用程序中導航時。 這對其他檢查很好，但不能保護路由。