基于ASP.Net Core和Layui实现简单用户登录

  之前学习java基本编程时，学习并写过最基本的电子会议厅功能，支持用户登录、退出等操作，那时用的都是最基本的html标签，使用session保存登录用户信息。转到asp.net core以后，虽然学了基本的知识，做过基本的页面，但是没有实现过用户登录功能。.net本身及第三方开源工具支持实现用户登录、认证、授权等功能，但学习时间较长，后续会逐步学习。本文中还是以ASP.Net Core的mvc项目为主，结合Layui，实现最简单的用户登录功能。

启用Session

  还是使用Session保存登录用户信息。ASP.Net Core的mvc项目默认没有启用Session相关功能，为启用Session相关功能，根据参考文献3，在program.cs中添加如下代码。注意！代码的顺序十分重要:“中间件的顺序很重要。在 UseRouting 之后和 MapRazorPages 与 MapDefaultControllerRoute 之前调用 UseSession。 请参阅中间件排序。”
  启用Session相关功能后，就可以在控制器及Razor页面中操作Session对象了。

var builder = WebApplication.CreateBuilder(args);

// Add services to the container.
builder.Services.AddControllersWithViews();

//下面两行代码是新增的代码
builder.Services.AddDistributedMemoryCache();
builder.Services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromSeconds(600);
    options.Cookie.HttpOnly = true;
    options.Cookie.IsEssential = true;
});

...
...

app.UseAuthorization();

//下面一行代码是新增的代码
app.UseSession();
...
...
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

控制器代码

  在项目默认的控制器中新增用户登录和用户注销两个函数，为简单起见，直接将用户名和密码写死在程序中，没有涉及数据库。用户名和密码验证通过后，将用户保存到Session中，注销时直接把Session清空（注销操作写的比较水，主要是百度Session操作，没有找到该怎么注销或关闭Session，于是就直接清空了事）。程序主要代码如下所示：

 public IActionResult UserLogin(string userId,string password)
 {
     if(userId=="gc_2299" && password=="111111")
     {
         if (string.IsNullOrEmpty(HttpContext.Session.GetString(SessionKeyName)))
         {
             HttpContext.Session.SetString(SessionKeyName, userId);
         }

         return View("Welcome");
     }
     else
     {
         return Error();
     }
 }

 public IActionResult UserLogout()
 {
     HttpContext.Session.Clear();
      return View("Index");
 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

登录界面前端代码

  参照Layui表单示例中的样式，做了简单的登录界面。

<form class="layui-form layui-form-pane1" action="home/UserLogin" lay-filter="first">
    <div class="layui-form-item"  style="width: 500px;">
      <label class="layui-form-label">用户名label>
      <div class="layui-input-block">
        <input type="text" name="userId" lay-verify="required|userId" lay-reqText="用户名不能为空" required placeholder="请输入用户名" autocomplete="off" class="layui-input" >
      div>
    div>
    <div class="layui-form-item"  style="width: 500px;">
      <label class="layui-form-label">密码label>
      <div class="layui-input-block">
        <input type="password" name="password" lay-verify="required|password" placeholder="请输入密码" autocomplete="off" class="layui-input">
      div>
    div>    
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="*">登录button>
      div>
    div>
  form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

欢迎界面前端代码

  参照Layui布局示例中的样式，做了简单的欢迎界面。唯一需要说明的是如何在页面中获取当前用户信息，根据参考文献2，在Razor页面中，直接通过Context.Session获取当前会话对象，并从中取到当前用户信息。

@{
    var username = Context.Session.GetString("_Name");

}

<div class="layui-layout layui-layout-admin">
  <div class="layui-header">
    <div class="layui-logo layui-hide-xs layui-bg-black">测试用户登录div>
  
    <ul class="layui-nav layui-layout-right">
      <li class="layui-nav-item layui-hide layui-show-md-inline-block">
        @username
        <dl class="layui-nav-child">
          <dd><a href="UserLogout">Sign outa>dd>
        dl>
      li>      
    ul>
  div>
  
  <div class="layui-side layui-bg-black">
    <div class="layui-side-scroll">
      
      <ul class="layui-nav layui-nav-tree" lay-filter="test">
        <li class="layui-nav-item layui-nav-itemed">
          <a class="" href="javascript:;">menu group 1a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">menu 1a>dd>
            <dd><a href="javascript:;">menu 2a>dd>
            <dd><a href="javascript:;">menu 3a>dd>
            <dd><a href="">the linksa>dd>
          dl>
        li>
        <li class="layui-nav-item">
          <a href="javascript:;">menu group 2a>
          <dl class="layui-nav-child">
            <dd><a href="javascript:;">list 1a>dd>
            <dd><a href="javascript:;">list 2a>dd>
            <dd><a href="">超链接a>dd>
          dl>
        li>
        <li class="layui-nav-item"><a href="javascript:;">click menu itema>li>
        <li class="layui-nav-item"><a href="">the linksa>li>
      ul>
    div>
  div>
  
  <div class="layui-body">
    
    <div style="padding: 15px;">
      内容主体区域       
    div>
  div>
div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53

程序效果及问题

  如下图所示，运行项目，显示用户登录界面，输入用户名和密码后，进入欢迎界面，界面右上角显示当前登录的用户名，鼠标移动到用户名上时会显示注销菜单，点击注销菜单后退回到登录界面。


  程序能跑通，但问题特别多，比较明显的是用户名和密码都显示在url里面了，还有就是layui的布局和导航菜单不怎么会用，后续还得继续学习，慢慢改进。

参考文献：
[https://blog.csdn.net/allway2/article/details/123124604]
[2]https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/http-context?view=aspnetcore-6.0
[3]https://docs.microsoft.com/zh-cn/aspnet/core/fundamentals/app-state?view=aspnetcore-6.0