Jx.Cms开发笔记（二）-系统登录

界面

此界面完全抄了BootstrapAdmin

css隔离

由于登录页面的css与其他页面没有什么关系，所以为了防止其他界面的css被污染，我们需要使用css隔离。

css隔离需要在_Host.cshtml中添加一条css引用。此引用如果使用Blazor模板创建项目时会自带，如果自己添加新的Area，则需要自己加入。

格式为

<link href="{ASSEMBLY NAME}.styles.css" rel="stylesheet">

如果是在RCL中使用，则需要添加

<link href="_content/{ASSEMBLY NAME}/{ASSEMBLY NAME}.bundle.scp.css" rel="stylesheet">

这里我们创建一个Login.razor.css来启用css隔离。

内容见Login.razor.css

Blazor Server登录

在Blazor 组件库 BootstrapBlazor中 Ajax 组件的使用中我们提到过，当BlazorServer连接上以后，我们就无法在进行cookie操作了，所以这里需要使用浏览器端进行Ajax处理。

这里就需要我们的Ajax组件登场了。

我们首先添加<Ajax></Ajax>标签，然后在登录按钮的DoLogin中编写代码。

private async Task DoLogin()
    {
        if (LoginVo.UserName.IsNullOrEmpty())
        {
            await MessageService.Show(new MessageOption()
            {
                Color = Color.Danger,
                Content = "用户名不能为空"
            });
            return;
        }
        
        if (LoginVo.Password.IsNullOrEmpty())
        {
            await MessageService.Show(new MessageOption()
            {
                Color = Color.Danger,
                Content = "密码不能为空"
            });
            return;
        }
        
        var ajaxOption = new AjaxOption
        {
            Url = "/api/Admin/User/Login",
            Data = LoginVo
        };
        var str = await AjaxService.GetMessage(ajaxOption);
        if (str.IsNullOrEmpty())
        {
            await MessageService.Show(new MessageOption()
            {
                Color = Color.Danger,
                Content = "登录失败"
            });
        }
        else
        {
            dynamic ret = Clay.Parse(str);
            if (ret.code != 20000)
            {
                await MessageService.Show(new MessageOption()
                {
                    Color = Color.Danger,
                    Content = ret.message
                });
            }
            else
            {
                await MessageService.Show(new MessageOption()
                {
                    Color = Color.Success,
                    Content = "登录成功"
                });
                ReturnUrl ??= "/Admin";
                await AjaxService.Goto(ReturnUrl);
            }
        }
    }

这里我们统统使用Message组件来做信息提示。

首先判断用户名密码不为空，这个就不说了。

后面的

var ajaxOption = new AjaxOption
        {
            Url = "/api/Admin/User/Login",
            Data = LoginVo
        };
        var str = await AjaxService.GetMessage(ajaxOption);

即为主要代码，发送LoginVo到Webapi的Controller。

Controller代码如下：

        [HttpPost]
        public async Task<object> Login([FromBody]LoginVo loginVo)
        {
            if (loginVo.UserName.IsNullOrEmpty())
            {
                return new { code = 50000, message = "用户名不能为空" };
            }
            if (loginVo.Password.IsNullOrEmpty())
            {
                return new { code = 50000, message = "密码不能为空" };
            }

            var entity = _adminUserService.Login(loginVo.UserName, loginVo.Password);
            if (entity != null)
            {
                var identity = new ClaimsIdentity(CookieAuthenticationDefaults.AuthenticationScheme);
                identity.AddClaim(new Claim(ClaimTypes.Name, entity.UserName));
                await Furion.App.HttpContext.SignInAsync(new ClaimsPrincipal(identity), new AuthenticationProperties(){IsPersistent = true, ExpiresUtc = loginVo.RememberMe? DateTimeOffset.Now.AddDays(5): DateTimeOffset.Now.AddMinutes(30)});

                return new { code = 20000, message = "登录成功" };
            }
            return new { code = 50000, message = "用户名或密码错误" };
        }

这里也是首先验证用户名密码是否正确，然后调用关键语句

                var identity = new ClaimsIdentity(CookieAuthenticationDefaults.AuthenticationScheme);
                identity.AddClaim(new Claim(ClaimTypes.Name, entity.UserName));
                await Furion.App.HttpContext.SignInAsync(new ClaimsPrincipal(identity), new AuthenticationProperties(){IsPersistent = true, ExpiresUtc = loginVo.RememberMe? DateTimeOffset.Now.AddDays(5): DateTimeOffset.Now.AddMinutes(30)});

这里我们使用微软自带的Claim的方式来进行身份验证，这也是BlaozrSrever里最简单的办法。

使用HttpContext.SignInAsync即可登录。

另外的配置

我们需要在Startup中增加身份验证的配置，这里我们用cookie，在ConfigureServices中添加

            services.AddAuthentication(CookieAuthenticationDefaults.AuthenticationScheme).AddCookie(op =>
            {
                op.LoginPath = "/Admin/Login";
            });

另外需要在Configure中添加

            app.UseAuthentication();
            app.UseAuthorization();

登录成功后跳转

由于BlazorServer建立连接后并不会再传输cookie，所以我们必须重新刷新一下页面，重新让Blazor建立连接，所以Ajax组件特意增加了一个Goto方法从浏览器进行跳转。

await AjaxService.Goto(ReturnUrl);

跳转后即可正常使用权限系统了。

结束

这样，我们的登录就完成了。