界面
此界面完全抄了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隔离。
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);
跳转后即可正常使用权限系统了。
结束
这样，我们的登录就完成了。
发表评论