在Blazor 中自定义权限验证

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

效果