（系列十二）Vue3+.Net8实现用户登录（超详细登录文档）

说明

    该文章是属于OverallAuth2.0系列文章，每周更新一篇该系列文章（从0到1完成系统开发）。
    该系统文章，我会尽量说的非常详细，做到不管新手、老手都能看懂。
    说明：OverallAuth2.0 是一个简单、易懂、功能强大的权限+可视化流程管理系统。
友情提醒：本篇文章是属于系列文章，看该文章前，建议先看之前文章，可以更好理解项目结构。
qq群：801913255，进群有什么不懂的尽管问，群主都会耐心解答。
有兴趣的朋友，请关注我吧(*^▽^*)。

关注我，学不会你来打我
前言
　　随着前后端框架（轮子）的逐渐搭建完成，我们的OverallAuth2.0项目也正式迈入功能开发阶段。
　　今天我们的目标是做一个带有认证的用户登录功能。
　　看该文章前，说明一点。最好结合我之前的系列文章观看，因为会使用到之前系列文章中的代码。当然有一定基础的码友可自动忽略。
流程图

从流程图上可以看出，本次登录非常简单，它没有过多的业务逻辑，就是一个简单的用户登录验证，成功之后，就能进入系统。至于说登录之后的业务逻辑处理，本篇文章不会涉及（交由之后的系列文章）。
实现功能
　　1、用户登录
　　2、登录失效处理
　　3、异常信息提示
编写后端接口
　　这里需要编写用户登录接口，并且返回用户数据。
       建立一个用户登录后的返回模型，由于在之前已经创建（LoginOutPut），我们只需在该模型中添加一个UserId即可，代码如下

1. /// <summary>
2. /// 登录输出模型
3. /// </summary>
4. public class LoginOutPut
5. {
6.     /// <summary>
7.     /// 用户ID
8.     /// </summary>
9.     public int UserId { get; set; }
11.     /// <summary>
12.     /// 用户名
13.     /// </summary>
14.     public string? UserName { get; set; }
16.     /// <summary>
17.     /// 密码
18.     /// </summary>
19.     public string? Password { get; set; }
21.     /// <summary>
22.     /// Token
23.     /// </summary>
24.     public string? Token { get; set; }
26.     /// <summary>
27.     /// Token过期时间
28.     /// </summary>
29.     public string? ExpiresDate { get; set; }
31. }

复制代码

ISysUserRepository仓储接口中，添加一个根据用户名和密码查找数据的接口

1. /// <summary>
2. /// 根据用户名称和密码获取用户信息
3. /// </summary>
4. /// <param name="userName">用户名称</param>
5. /// <param name="password">用户密码</param>
6. /// <returns></returns>
7. public SysUser? GetUserMsg(string userName, string password);

复制代码

SysUserRepository仓储中，实现接口

1.         /// <summary>
2.         /// 根据用户名称和密码获取用户信息
3.         /// </summary>
4.         /// <param name="userName">用户名称</param>
5.         /// <param name="password">用户密码</param>
6.         /// <returns></returns>
7.         public SysUser? GetUserMsg(string userName, string password)
8.         {
9.             string sql = " select * from Sys_User where UserName =@UserName and Password=@Password";
10.             using var connection = DataBaseConnectConfig.GetSqlConnection();
11.             return connection.QueryFirstOrDefault<SysUser>(sql, new { UserName = userName, Password = password });
12.         }

复制代码

同理在SysUserService、ISysUserService层中，添加相同接口
ISysUserService

1. /// <summary>
2. /// 根据用户名称和密码获取用户信息
3. /// </summary>
4. /// <param name="userName">用户名称</param>
5. /// <param name="password">用户密码</param>
6. /// <returns></returns>
7. ReceiveStatus<LoginOutPut> GetUserMsg(string userName, string password);

复制代码

SysUserService

1. /// <summary>
2. /// 根据用户名称和密码获取用户信息
3. /// </summary>
4. /// <param name="userName">用户名称</param>
5. /// <param name="password">用户密码</param>
6. /// <returns></returns>
7. public ReceiveStatus<LoginOutPut> GetUserMsg(string userName, string password)
8. {
9.      ReceiveStatus<LoginOutPut> receiveStatus = new ReceiveStatus<LoginOutPut>();
10.      List<LoginOutPut> loginResultsList = new List<LoginOutPut>();
11.      if (string.IsNullOrEmpty(userName))
12.          return ExceptionHelper<LoginOutPut>.CustomExceptionData("用户名不能为空！");
13.      if (string.IsNullOrEmpty(password))
14.          return ExceptionHelper<LoginOutPut>.CustomExceptionData("密码不能为空！");
15.      var result = _sysUserRepository.GetUserMsg(userName, password);
16.      if (result == null)
17.          return ExceptionHelper<LoginOutPut>.CustomExceptionData(string.Format("用户【{0}】不存在,或账号密码输入错误", userName));
18.      if (result.IsOpen == false)
19.          return ExceptionHelper<LoginOutPut>.CustomExceptionData(string.Format("用户【{0}】已停用，请开启后再登录", userName));
20.    
21.      LoginOutPut loginResults = new LoginOutPut()
22.      {
23.          UserId = result.UserId,
24.          UserName = result.UserName,
25.          Token = string.Empty,
26.          ExpiresDate = string.Empty
27.      };
28.      loginResultsList.Add(loginResults);
29.      receiveStatus.data = loginResultsList;
30.      receiveStatus.msg = "登录成功";
31.      return receiveStatus;
32. }

复制代码

上述接口中，我们要验证用户名、密码是否为空，是否正确，用户账号是否启用等。如果验证不通过。我们使用ExceptionHelper异常帮助类，把异常信息，反馈给前端。
如果验证通过，我们需要返回用户名、用户id、token、过期时间给前端。
在SysUserController控制器中，添加如下接口

1. /// <summary>
2. /// 登录
3. /// </summary>
4. /// <returns></returns>
5. [HttpPost]
6. [AllowAnonymous] // 不验证权限
7. public ReceiveStatus<LoginOutPut> Login(LoginInput loginModel)
8. {
9.      var result = _userService.GetUserMsg(loginModel.UserName ?? string.Empty, loginModel.Password ?? string.Empty);
10.      if (result.success)
11.      {
12.          var loginResult = result.data.First();
13.          var tokenResult = JwtPlugIn.BuildToken(loginModel);
14.          loginResult.Token = tokenResult.Token;
15.          loginResult.ExpiresDate = tokenResult.ExpiresDate;
16.          result.data = new List<LoginOutPut>() { loginResult };
17.      }
18.      return result;
19. }

复制代码

因为是用户登录接口，所以不需要jwt验证
在用户登录成功后，我们根据用户名、用户密码、jwt配置信息生成token和过期时间。
ps：jwt配置信息请查看之前系列文章
前端结构调整
移动一下文件（不是跟着系列文章的，请忽略，主要是前端结构调整）
把components文件夹下的图片，移动到同src文件夹同级的resources的picture目录下（记住调整图片引用路径）。
把components文件夹下的HelloWorld.vue文件内容，拷贝到views下的framework文件夹中（没有就新建），然后删除components文件夹。
搭建登录界面
在scr文件夹下创建model文件夹，并在下面创建user文件夹，然后再user文件夹下创建一个LoginInput.ts的文件，用于存放字段（model文件夹以后作为存放模型的文件夹）

1. export interface LoginInput {
2.     //用户名称
3.     UserName: string;
4.     //用户密码
5.     Password: string;
6. }

复制代码

接着往下。
在api文件夹下创建user文件夹，并添加index.ts文件内容如下（api文件夹以后作为存放调用后端接口的文件夹）

1. import { LoginInput } from '@/model/user/LoginInput';
2. import Http from '../http';
4. export const login = function(loginForm: LoginInput) {
5.     return Http.post('/api/SysUser/Login', loginForm)
6. }

复制代码

该代码主要是调用后端写的登录接口
接着往下。
在views文件夹目录下，创建login文件夹，并添加index.vue文件。内容如下
[code]                              OverallAuth2.0 权限管理系统                          简单、易懂、功能强大，欢迎访问使用。                                                  密码登录                                                                                                                                                                                                登录                                                        *为了帮助更多的人知道及了解本项目,请帮忙Star。拜谢各位
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！