Blazor：没有 session / JWT 令牌时重定向到登录页面？

Question

我正在尝试在 Blazor 中创建一个新应用程序并进行身份验证。我正在使用存储在本地存储中的 JWT 令牌。当应用程序加载时，我需要检查存储中是否有令牌。如果是这样，请将其添加到所有 API 请求的 HTTP headers 中，如果不是，则在页面加载之前重定向到登录页面......我该在哪里做？有多个页面需要此检查，因此需要在一个位置完成以覆盖所有页面。这应该在 Startup 中完成吗？

搜索没有提供解决方案，因为我是 Blazor 的新手，找到正确的搜索词有点困难:)

Answer 1

我所做的是编写自己的 http 服务来执行此操作。

它被称为后端并且有一个属性像这样的令牌：

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

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

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

然后在此 class 中实现 http class 具有的所有方法，同时注入您的令牌。例如：

    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 url.

编辑对于重定向部分：为简洁起见，我省略了这部分，但这是完整的方法：

    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 2

你是什么意思Startup？初创公司 class，对吗？

目前 Razor 组件框架没有应用程序事件周期。耐心点……它来了……同时，为了学习的缘故，请使用组件事件周期。通常，您应该将 JWT 存储在本地存储中，包括有关用户的数据，他是否已通过身份验证等，以及检索此数据以查明用户是否已通过身份验证的服务。只要需要身份验证（或授权），您就可以调用此服务。

顺便说一句，您说“before the page loads”并不是要停止...的进程。您的意思是您不希望显示 "New Profile Page"，例如，在在线约会网站中，如果用户未通过身份验证，对吗？那么，在这种情况下，从页面（组件）OnInit 或 OnInitAsync 方法调用身份验证本地服务（从本地存储检索数据）。

希望这对您有所帮助...

Answer 3

一个解决方案（目前，我认为这不是最好的？）是为所有组件页面创建一个基础 class 以继承并覆盖 OnInit 方法以进行检查和重定向。这在应用程序加载后导航到 link 时也有效。

app.cshtml 组件中的检查仅适用于初始启动，不适用于在应用程序内导航时。这对于其他检查会很好，但不能保护路由。

Answer 4

创建一个组件并命名为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>

致谢名单：this article

Blazor：没有 session / JWT 令牌时重定向到登录页面？

Blazor: Redirect to Login page when there is no session / JWT token?

c#

authentication

redirect

login

blazor