16

JWT をサポートしたいので、トークンを保持する必要があります。これにアクセスするための機能はありますか？それとも、今のところこの機能にアクセスするために、独自の JavaScript 関数を登録するだけでよいのでしょうか?

編集：アドバイスに従って、JS相互運用を次のように使用しようとしました：

<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";
        }
    }
}

しかし、これにより diag で WASM エラーが発生します。

WASM: [Microsoft.AspNetCore.Blazor.Browser.Interop.JavaScriptException] 'readStorage' という名前の登録済み関数が見つかりませんでした。WASM: エラー: 'readStorage' という名前の登録済み関数が見つかりませんでした。

参考までに、これは Blazor VS ボイラープレート プロジェクトの MainLayout.cshtml にあります。

（必要に応じて新しい質問を作成できます。ただし、これに多少関連しています）

4

5 に答える 5

8

0.1 では、独自の JavaScript 相互運用機能を作成する必要があります。しかし、これは何らかの作業が行われたものであり、おそらく 0.2 リリースであると思います。

または (セッション間のストレージが必要ない場合)、https://github.com/aspnet/samples/blob/master/samples/aspnetcore/blazor/FlightFinder/FlightFinder のように、独自の DI シングルトンを作成できます。クライアント/サービス/AppState.cs

編集
これにはオープンな PR があるため、実際にはすぐに公開されるはずです: https://github.com/aspnet/Blazor/pull/205

Edit2 0.2 は完了しましたが、ローカルストレージはまだありません。それまでの間、私はこれ用のパッケージを開発しました: BlazorExtensionsもナゲットにあります

于 2018-04-07T07:19:45.263 に答える
2

Microsoftには独自のパッケージがありますがMicrosoft.AspNetCore.ProtectedBrowserStorage、現時点ではまだ本番環境に対応しておらず、サーバー側のblazor専用です.

サードパーティの依存関係を持ちたくない場合は、 を介して簡単に実装できます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");
    }
}

使用法：

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 に答える