您的位置:首页 > 编程语言 > ASP

Asp.Net Core 项目实战之权限管理系统(5) 用户登录

2016-10-09 21:32 1321 查看
0 Asp.Net Core 项目实战之权限管理系统(0) 无中生有

1 Asp.Net Core 项目实战之权限管理系统(1) 使用AdminLTE搭建前端

2 Asp.Net Core 项目实战之权限管理系统(2) 功能及实体设计

3 Asp.Net Core 项目实战之权限管理系统(3) 通过EntityFramework Core使用PostgreSQL

4 Asp.Net Core 项目实战之权限管理系统(4) 依赖注入、仓储、服务的多项目分层实现

5 Asp.Net Core 项目实战之权限管理系统(5) 用户登录

6 Asp.Net Core 项目实战之权限管理系统(6) 功能管理

7 Asp.Net Core 项目实战之权限管理系统(7) 组织机构、角色、用户权限

8 Asp.Net Core 项目实战之权限管理系统(8) 功能菜单的动态加载

github源码地址

0 TagHelper的使用

TagHelper是Asp.Net Core中提供的全新的服务端代码参与创建和渲染 HTML 元素的方法,TagHelpers 在 Razor视图中减少或避免了 HTML 和 C# 之间的显示转换,它具有以下特点:

一种友好的Html开发体验

Razor 标记使用 Tag Helpers 看起来更像标准的 HTML。熟悉 HTML/CSS/JavaScript 的前端设计师在没有学习 C# Razor 语法的情况下能够编辑 Razor 。

提供丰富的智能感知环境来创建 HTML和Razor标记

通过Microsoft.AspNetCore.Razor.Tools提供智能感知和智能提醒,大大提高编码效率。

提供服务器端[b]更强大,更可靠和可维护代码的html渲染方式[/b]

TagHelper的使用一般放在“视图导入页”中,视图导入页中还会放置我们会用到的服务端引用。

0.0 创建视图导入页

在Fonour.MVC项目中,右键Views文件夹,添加新项,选择MVC视图导入页,添加一个默认名称为 “_ViewImports.cshtml”的视图导入页。





修改视图导入页的内容如下:

@addTagHelper *, Microsoft.AspNetCore.Mvc.TagHelpers


0.1 使用Microsoft.AspNetCore.Razor.Tools

Microsoft.AspNetCore.Razor.Tools能够提供TagHelper的智能感知提示和代码加粗高亮显示。

通过NuGet程序包管理器安装

通过NuGet程序包控制台安装

直接修改project.json

最终在project.json文件中的dependencies及tools配置节中会出现Microsoft.AspNetCore.Razor.Tools

"dependencies": {
"Microsoft.NETCore.App": "1.0.1",
"Microsoft.AspNetCore.Diagnostics": "1.0.0",
"Microsoft.AspNetCore.Server.IISIntegration": "1.0.0",
"Microsoft.AspNetCore.Server.Kestrel": "1.0.1",
"Microsoft.Extensions.Logging.Console": "1.0.0",
"Microsoft.AspNetCore.Mvc": "1.0.1",
"Microsoft.AspNetCore.StaticFiles": "1.0.0",
"Microsoft.Extensions.Configuration": "1.0.0",
"Microsoft.Extensions.Configuration.FileExtensions": "1.0.0",
"Microsoft.Extensions.Configuration.Json": "1.0.0",
"Fonour.Application": "1.0.0-*",
"Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final",
"Microsoft.AspNetCore.Session": "1.0.0",
"Fonour.Utility": "1.0.0-*"
},

"tools": {
"Microsoft.AspNetCore.Server.IISIntegration.Tools": "1.0.0-preview2-final",
"Microsoft.AspNetCore.Razor.Tools": "1.0.0-preview2-final"
},


打开Login/Index.cshtml文件,随意输入一个label标签,发现已经可以出现asp-for的TagHelper提示。





一个完整的使用TagHelper的label标签创建完成后,会以加粗高亮的方式显示。你自己可以根据喜好在 工具 > 选项 > 环境 > 字体和颜色 中自定义TagHelperElement的字体和颜色。更多关于TagHelper的使用,可以找专门的文章进行了解。

注意:如果安装完Microsoft.AspNetCore.Razor.Tools时不会出现智能提示,重启一下Visual Studio即可。

1 Asp.Net Core中Session中间件的使用

我们需要在用户登录以后记录当前登录用户的会话状态,ASP.NET Core 发布了一个关于会话的程序包,里面提供了用于管理会话状态的中间件。你可以在 project.json 中加入对Microsoft.AspNetCore.Session的引用来安装这个程序包。

1.0 Microsoft.AspNetCore.Session使用

0 Microsoft.AspNetCore.Session依赖项添加

通过NuGet程序包管理器、控制台、或直接修改project.json文件,添加对Microsoft.AspNetCore.Session中间件的引用。





1 修改Startup.cs文件的的ConfigureServices方法,增加Session服务注册

public void ConfigureServices(IServiceCollection services)
{
//获取数据库连接字符串
var sqlConnectionString = Configuration.GetConnectionString("Default");

//添加数据上下文
services.AddDbContext<FonourDbContext>(options =>options.UseNpgsql(sqlConnectionString));
services.AddScoped<IUserRepository, UserRepository>();
services.AddScoped<IUserAppService, UserAppService>();
services.AddMvc();
//Session服务
services.AddSession();
}


2 修改Startup.cs文件的的Configure方法,请求管道中启用Session

public void Configure(IApplicationBuilder app, IHostingEnvironment env, ILoggerFactory loggerFactory)
{
loggerFactory.AddConsole();

if (env.IsDevelopment())
{
//开发环境异常处理
app.UseDeveloperExceptionPage();
}
else
{
//生产环境异常处理
app.UseExceptionHandler("/Shared/Error");
}
//使用静态文件
app.UseStaticFiles();
//Session
app.UseSession();
//使用Mvc,设置默认路由为系统登录
app.UseMvc(routes =>
{
routes.MapRoute(
name: "default",
template: "{controller=Login}/{action=Index}/{id?}");
});

SeedData.Initialize(app.ApplicationServices); //初始化数据
}


1.1 Byte数组与对象转换帮助类ByteConvertHelper

Asp.Net Core中Session的Set方法必须提供一个Byte[]数组来存放对象,此外为了方便使用,还提供了SetString和SetInt32扩展方法。

void Set(string key, byte[] value);


我们在Fonour.Utility项目中增加一个Byte数组与对象互相转换的帮助类ByteConVertHelper。

public class ByteConvertHelper
{
/// <summary>
/// 将对象转换为byte数组
/// </summary>
/// <param name="obj">被转换对象</param>
/// <returns>转换后byte数组</returns>
public static byte[] Object2Bytes(object obj)
{
string json = JsonConvert.SerializeObject(obj);
byte[] serializedResult = System.Text.Encoding.UTF8.GetBytes(json);
return serializedResult;
}

/// <summary>
/// 将byte数组转换成对象
/// </summary>
/// <param name="buff">被转换byte数组</param>
/// <returns>转换完成后的对象</returns>
public static object Bytes2Object(byte[] buff)
{
string json = System.Text.Encoding.UTF8.GetString(buff);
return JsonConvert.DeserializeObject<object>(json);
}

/// <summary>
/// 将byte数组转换成对象
/// </summary>
/// <param name="buff">被转换byte数组</param>
/// <returns>转换完成后的对象</returns>
public static T Bytes2Object<T>(byte[] buff)
{
string json = System.Text.Encoding.UTF8.GetString(buff);
return JsonConvert.DeserializeObject<T>(json);
}
}


2 用户登录实现

有了以上准备工作,我们可以开始正式实现用户登录功能了。

2.0 Model

在Fonour.MVC项目中增加一个Models文件夹,用于存放前端交互使用的Model类,在Models文件夹下新建一个LoginModel类,并通过DataAnnotations特性指定属性的验证信息。

public class LoginModel
{
[Required(ErrorMessage = "用户名不能为空。")]
public string UserName { get; set; }

[Required(ErrorMessage = "密码不能为空。")]
[DataType(DataType.Password)]
public string Password { get; set; }

public bool RememberMe { get; set; }
}


在视图导入页_ViewImport.cshtml中增加对模型的引用

@using Fonour.MVC.Models


2.1 View

使用TagHelper修改Login/Index.cshtml为如下内容

@{
Layout = null;
}
@model LoginModel
<!DOCTYPE html>
<html>
<head>
<title>系统登录</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="~/lib/font-awesome/css/font-awesome.css">
<link rel="stylesheet" href="~/css/AdminLTE.css">
<link rel="stylesheet" href="~/lib/iCheck/skins/square/blue.css">
</head>
<body class="hold-transition login-page">
<div class="login-box">
<div class="login-logo">
<a href="http://fonour.cnblogs.com" target="_blank"><b>Fonour</b></a>
</div>
<!-- /.login-logo -->
<div class="login-box-body">
<p class="login-box-msg">权限管理系统</p>
<div asp-validation-summary="All" class="text-danger"></div>
<form asp-controller="Login" asp-action="Index" method="post">
<div class="form-group has-feedback">
<input asp-for="UserName" type="text" class="form-control" placeholder="用户名">
<span class="glyphicon glyphicon-user form-control-feedback"></span>
<span asp-validation-for="UserName" class="text-danger"></span>
</div>
<div class="form-group has-feedback">
<input asp-for="Password" type="password" class="form-control" placeholder="密码">
<span class="glyphicon glyphicon-lock form-control-feedback"></span>
</div>
<div class="row">
<div class="col-xs-8">
<div class="checkbox icheck">
<label>
<input asp-for="RememberMe" type="checkbox"> 记住我
</label>
</div>
</div>
<!-- /.col -->
<div class="col-xs-4">
<button type="submit" class="btn btn-primary btn-block btn-flat">登录</button>
</div>
<!-- /.col -->
</div>
</form>
</div>
<!-- /.login-box-body -->
</div>
<!-- /.login-box -->
<script src="~/lib/jquery/dist/jquery.js"></script>
<script src="~/lib/bootstrap/dist/js/bootstrap.js"></script>
<script src="~/lib/iCheck/icheck.js"></script>
<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
});
</script>
</body>
</html>


关键说明

@model LoginModel 指定页面绑定的模型为LoginModel。

asp-controller 指定form标签提交时对应的控制器名称。

asp-action 指定form标签提交时对应的Action名称。

asp-for 指定HTML元素绑定的模型对应的属性名称。

asp-validation-for 绑定对应模型属性名称,模型验证失败时,显示模型定义的ErrorMessage。

asp-validation-summary="All" 显示所有验证失败的错误信息。

2.2 Controller

修改LoginController,增加用户登录对应的控制器方法。

[HttpPost]
public IActionResult Index(LoginModel model)
{
if (ModelState.IsValid)
{
//检查用户信息
var user = _userAppService.CheckUser(model.UserName, model.Password);
if (user != null)
{
//记录Session
HttpContext.Session.Set("CurrentUser", ByteConvertHelper.Object2Bytes(user));
//跳转到系统首页
return RedirectToAction("Index", "Home");
}
ModelState.AddModelError("", "用户名或密码错误。");
return View();
}
return View(model);
}


到此我们基本上就完成了用户登录的逻辑,以及服务器端的登录验证。当输入用户名、密码信息不符合条件时,会给出详细的错误提示。









2.3 验证信息美化、记住我功能的实现

上面我们只做了服务端验证,而且错误信息的提示并不是很美观,我们可以根据需要修改样式对错误提示信息进行美化。我这里直接使用Layer.js这个前端库。

验证信息美化

修改用户登录控制器方法,有错误信息时只返回第一条错误信息,客户端自行处理错误信息。

[HttpPost]
public IActionResult Index(LoginModel model)
{
if (ModelState.IsValid)
{
//检查用户信息
var user = _userAppService.CheckUser(model.UserName, model.Password);
if (user != null)
{
//记录Session
HttpContext.Session.Set("CurrentUser", ByteConvertHelper.Object2Bytes(user));
//跳转到系统首页
return RedirectToAction("Index", "Home");
}
ViewBag.ErrorInfo = "用户名或密码错误。";
return View();
}
ViewBag.ErrorInfo = ModelState.Values.First().Errors[0].ErrorMessage;
return View(model);
}


通过Bower程序包管理器添加对Layer的引用,在Login/Index.cshtml中增加对layer.js的引用

<script src="~/lib/layer/layer.js"></script>


增加一个隐藏的input标签用于记录错误信息。

<input id="errorInfo" type="hidden" value="@ViewBag.ErrorInfo" />


初始化完成后增加对错误信息的处理。

<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});
//显示服务端验证的错误信息
if ($("#errorInfo").val()) {
layer.tips($("#errorInfo").val(), "#btnLogin");
};
});
</script>


此时运行程序,服务器端错误信息的展示样式已经比较美观了。





记住我

记住我,主要是记录输入的用户名及密码,通过cookie保存,首先通过Bower前端包管理器增加Jquery.Cookie的引用。在Login/Index.cshtml中增加对jquery.cookie.js的引用。

<script src="~/lib/jquery.cookie/src/jquery.cookie.js"></script>


增加form的onsubmit方法

<form asp-controller="Login" asp-action="Index" method="post" onsubmit="onSubmit()">


<script>
$(function () {
$('input').iCheck({
checkboxClass: 'icheckbox_square-blue',
radioClass: 'iradio_square-blue',
increaseArea: '20%' // optional
});

//显示服务端验证的错误信息
if ($("#errorInfo").val()) {
layer.tips($("#errorInfo").val(), "#btnLogin");
};

//判断之前是否有设置cookie,如果有,则设置【记住我】选择框
if ($.cookie("fonour_userName") != undefined) {
$("#RememberMe").attr("checked", "checked");
}
else {
$("#RememberMe").removeAttr("checked");
}
//读取cookie
if ($("#RememberMe:checked").length > 0) {
$("#UserName").val($.cookie("fonour_userName"));
$("#Password").val($.cookie("fonour_password"));
}
});
//根据是否勾选记住我记录或清除cookie
function onSubmit() {
if ($("#RememberMe:checked").length > 0) {//设置cookie
$.cookie("fonour_userName", $("#UserName").val());
$.cookie("fonour_password", $("#Password").val());
} else {//清除cookie
$.removeCookie("fonour_userName");
$.removeCookie("fonour_password");
}
};
</script>


输入用户名密码登陆后,再次回到登录界面,会发现用户名及密码已经填充。

3 用户是否登录控制器拦截

一个最基本的控制器拦截,就是当我们直接通过在地址栏输入访问路由地址时,首先应该判断用户是否已经登录,如果没有登录应该实现跳转到登录页面。大致思路是通过重写Controller的OnActionExecuting方法,在OnActionExecuting方法中判断用户是否登录并实现跳转。

3.1 新建控制器基类

在Fonour.MVC中右键Controllers文件夹,添加一个名称为FonourControllerBase的控制器基类,内容如下。

public abstract class FonourControllerBase : Controller
{
public override void OnActionExecuting(ActionExecutingContext filterContext)
{
byte[] result;
filterContext.HttpContext.Session.TryGetValue("CurrentUser",out result);
if (result == null)
{
filterContext.Result = new RedirectResult("/Login/Index");
return;
}
base.OnActionExecuting(filterContext);
}
}


需要进行登陆验证的控制器,修改为从FonourControllerBase继承,这里我们修改HomeController

public class HomeController : FonourControllerBase


启动程序,在未登录情况下,通过地址栏直接访问/Home/Index,会发现已经自动跳转到系统登录界面。

4 总结

本次主要介绍了TagHelper的简单实用;Asp.Net Core中的Session中间件的使用;以及系统登录的服务端验证,并对控制器的访问进行了统一的是否登录验证拦截。下一节主要进行功能管理的实现。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐