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