Blazor是什么

Blazor 是微軟在 .NET 里推出的一個 WEB 客戶端 UI 交互的框架，

使用 Blazor 你可以代替 JavaScript 來實現自己的頁面交互邏輯，可以很大程度上進行 C# 代碼的復用，Blazor 對于 .NET 開發人員來說是一個不錯的選擇。

需求背景

其實我對著這東西是挺反感的，但是沒辦法，這個是之前別人遺留的項目，那個哥們干了2個月就走人了。我那時候正好入職，也就交接給我了。我當時的態度是代碼能正常編譯運行就好了。其他的業務對不對就交給測試人員去驗證。

之前只是實現了業務功能，但是連個權限驗證也沒有，現在要上線了，總不能裸奔吧，所以就需要加個權限驗證。

代碼實現

1、在公共部分 App.razor 加個輸入用戶名、驗證碼

<Form?Model="@_vm.Data"??????Loading="_vm.Loading"??????LabelColSpan="8"??????WrapperColSpan="16"><FormItem><Input?@bind-Value="@context.username"?/></FormItem><FormItem><Input?@bind-Value="@context.userpwd"?/></FormItem><FormItem?WrapperColSpan="24"?Style="text-align:center"><Button??HtmlType="button"?OnClick="@(?async?()?=>await?login())">登錄</Button></FormItem>
</Form>復制代碼

2、實現登錄事件OnClick="@( async () =>await login())

private?loginVm?_vm?=?new?loginVm();????public?async?Task?login(){var?result?=?_vm.Data;????????if(result.username=="xxxx"?&&??result.userpwd=="xxxxxxx"){await?JsRuntime.InvokeAsync<string>("InitialCarousel");???????????Logined?=?true;????????}else{ResetForm();????????????Logined?=?false;??????????????await?JsRuntime.InvokeAsync<string>("alerterror");????????}}private?void?ResetForm(){_vm.Data.username?=?"";????????_vm.Data.userpwd?=?"";????}public?bool?Logined;??????protected?override?async?Task?OnInitializedAsync(){await?base.OnInitializedAsync();????????????try{var?TValue?=?await?JsRuntime.InvokeAsync<string>("returnInitialCarousel");?????????????if(!string.IsNullOrWhiteSpace(TValue)){Logined?=?true;????????????}else{Logined?=?false;????????????}?????}catch?(Exception?ex){Logined?=?false;??}}
}復制代碼

3、頁面做個判斷，有權限正常顯示，沒權限顯示登錄界面

<Router?AppAssembly="@typeof(Program).Assembly"><Found?Context="routeData">@if(Logined){<RouteView?RouteData="@routeData"?DefaultLayout="@typeof(BasicLayout)"?/>}else{<LayoutView?Layout="@typeof(BasicLayout)">
<Form?Model="@_vm.Data"??????Loading="_vm.Loading"??????LabelColSpan="8"??????WrapperColSpan="16"><FormItem><Input?@bind-Value="@context.username"?/></FormItem><FormItem><Input?@bind-Value="@context.userpwd"?/></FormItem><FormItem?WrapperColSpan="24"?Style="text-align:center"><Button??HtmlType="button"?OnClick="@(?async?()?=>await?login())">μ???</Button></FormItem>
</Form></LayoutView>}??????</Found><NotFound><LayoutView?Layout="@typeof(BasicLayout)"><p>Sorry,?there's?nothing?at?this?address.</p></LayoutView></NotFound>
</Router><AntContainer?/>復制代碼

4、這里我是用cookies做判斷，登錄的時候寫入cookies,直接調用js方法實現

<script>function?alerterror()?{console.log(333);?????????alert("賬號或密碼錯誤");?????}function?InitialCarousel()?{console.log(222);????????????document.cookie?=?"username=John?Doe;?path=/";????????}function?returnInitialCarousel()?{console.log(111);????????????var?cname?=?"username";????????????var?name?=?cname?+?"=";????????????var?ca?=?document.cookie.split(';');????????????for?(var?i?=?0;?i?<?ca.length;?i++)?{????????????????var?c?=?ca[i].trim();????????????????if?(c.indexOf(name)?==?0)?return?c.substring(name.length,?c.length);????????????}return?"";????????}</script>復制代碼

效果