Customize permission validation in blazor

Blazor What is it?

Blazor It's Microsoft. .NET One of WEB client UI The framework of interaction ,

Use Blazor You can replace JavaScript To realize their own page interaction logic , To a large extent C# Code reuse ,Blazor about .NET It's a good choice for developers .

Demand background

In fact, I'm disgusted with this thing , But there's no way , This is a project left by others before , That guy did 2 I left in six months . I just started at that time , It's over to me . My attitude at that time was that it would be good if the code could compile and run normally . Whether other businesses are right or not is left to testers to verify .

Previously, it only realized business functions , But there is not even a permission verification , Now it's time to go online , You can't run naked , So you need to add a permission verification .

Code implementation

1、 In the public sector App.razor Add an input user name 、 Verification Code

<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())">
           Sign in 
        </Button>
    </FormItem>
</Form> Copy code 

2、 Implement login events 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;  }
    }
} Copy code 

3、 Make a judgment on the page , Have permission to display normally , No permission to display login interface

<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 /> Copy code 

4、 Here I use cookies Do judgment , Write when logging in cookies, Call directly js Method realization

<script>
     function alerterror() {
         console.log(333);         alert(" Wrong account or password ");     }

        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> Copy code 

effect