16

我想支持 JWT，所以我需要保留令牌；有什么设施可以访问这个吗？还是我们现在应该注册我们自己的 javascript 函数来访问这个功能？

编辑：根据建议，我尝试将 JS interop 用作：

<script>
    localStorage.setItem("key1", "key1data");
    Blazor.registerFunction("readStorage", (key) => {
        return localStorage.getItem(key);
    });
</script>
@if (jwtKey == null)
{
<div class="login-panel">
    <p>JWT not loaded</p>
</div>
}
else
{
<div class="login-panel">
    <p>@jwtKey</p>
</div>
}

@functions {
    public RenderFragment Body { get; set; }
    string jwtKey;

    protected override async Task OnInitAsync()
    {
        jwtKey = RegisteredFunction.Invoke<string>("readStorage", "key1");
        if (jwtKey == null)
        {
            jwtKey = "Unknown";
        }
    }
}

但这会导致诊断中出现 WASM 错误：

WASM：[Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException] 找不到名为“readStorage”的注册函数。WASM：错误：找不到名为“readStorage”的注册函数。

仅供参考，这是在 Blazor VS 样板项目的 MainLayout.cshtml 中。

（如果合适，可以提出一个新问题；虽然与这个问题有些相关）

4

5 回答 5

8

对于 0.1，您需要编写自己的 javascript 互操作。但我相信这是可行的，也许在 0.2 版本中。

或者（如果您不需要会话之间的存储）您可以编写自己的 DI 单例，就像在此处完成的那样：https://github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/FlightFinder/FlightFinder。客户端/服务/AppState.cs

编辑
对此有一个公开的 PR，所以确实应该很快就会出现：https ://github.com/aspnet/Blazor/pull/205

Edit2 0.2 已完成，但还没有本地存储。与此同时，我为此开发了一个包：BlazorExtensions also on nuget

于 2018-04-07T07:19:45.263 回答
3

它可能默认实现到 Blazor 中，但现在我正在使用： Nuget - BlazorStorage

于 2018-05-14T21:42:29.173 回答
3

In case someone else is struggeling with this (as of juni-july 2018): Steve Sanderson addresses this very issue (localstorage) in his NDC conference video here: https://www.youtube.com/watch?v=JU-6pAxqAa4 from around minute 45 or so.

He uses a a nuget package for this: https://github.com/cloudcrate/BlazorStorage Usage examples on the page, so no need to repat here.

于 2018-08-25T14:59:36.473 回答
2

Microsoft has its own package Microsoft.AspNetCore.ProtectedBrowserStorage But as of now it is not production ready yet and it is only for server side blazor.

If you don't want to have third-party dependency you can easily implement it via JS interop.

public class LocalStorage
{
    private readonly IJSRuntime _jsRuntime;

    public LocalStorage(IJSRuntime jsRuntime)
    {
        _jsRuntime = jsRuntime;
    }

    public async Task SetAsync<T>(string key, T value)
    {
        string jsVal = null;
        if (value != null)
            jsVal = JsonSerializer.Serialize(value);
        await _jsRuntime.InvokeVoidAsync("localStorage.setItem", 
            new object[] { key, jsVal });
    }
    public async Task<T> GetAsync<T>(string key)
    {
        string val = await _jsRuntime.InvokeAsync<string>("localStorage.getItem", key);
        if (val == null) return default;
        T result = JsonSerializer.Deserialize<T>(val);
        return result;
    }
    public async Task RemoveAsync(string key)
    {
        await _jsRuntime.InvokeVoidAsync("localStorage.removeItem", key);
    }
    public async Task ClearAsync()
    {
        await _jsRuntime.InvokeVoidAsync("localStorage.clear");
    }
}

Usage:

await _localStorage.SetAsync("Test", 42);
var val = await _localStorage.GetAsync<int>("Test");
await _localStorage.RemoveAsync("Test");
await _localStorage.ClearAsync();
于 2020-07-29T11:26:39.613 回答
1

There is now a package called Blazor.Extensions.Storage which is a curated extension https://github.com/BlazorExtensions/Storage

于 2019-09-11T07:52:34.820 回答