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>复制代码

效果