在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>

效果