登录页面（无密码登录、Token传输）

1、登录页面HTML代码（CSS代码不包含）

（页面中采用了Vue.js、ElementUI、Axios作为页面响应 ）

<div id="loginPage">
   <h3>用户登录</h3>
   <p>
       <el-input placeholder="请输入登录账号" v-model="userNo">
           <template slot="prepend">账号</template>
       </el-input>
   </p>
   <p>
       <el-input placeholder="请输入登录密码" v-model="passWord" show-password>
           <template slot="prepend" >密码</template>
       </el-input>
   </p>
   <p>
       <el-checkbox v-model="remMe">记住我</el-checkbox>
   </p>
   <p>
       <el-button type="primary" v-on:click="login">登录</el-button>
       <el-button type="info" v-on:click="back">返回</el-button>
   </p>
 </div>

2、页面点击登录调用登录接口

<script>
    var vm = new Vue({
        el:"#loginPage",
        data:{ // 数据绑定
            userNo:"",
            passWord:"",
            remMe:false  // 用户首次访问该页面时，记住我是未选中状态
        },
        mounted(){ 
            // 页面挂载后，自动填入保存在浏览器里的账号密码。
            if(localStorage["UserInfo"] != undefined){
                var userData = JSON.parse(localStorage["UserInfo"]) // 采用对象的形式保存在浏览器里
                this.userNo = userData.userNo;
                this.passWord = userData.passWord;
                this.remMe = userData.remMe;
            }
        },
        methods:{
            login:function(){
                console.log('执行至此')  
                var remMe = this.remMe;
                var UserInfo = {
                    userNo : "",
                    passWord : "",
                    remMe : false
                } 
                axios.get(`https://localhost:7204/Login/GetLoginRes/${this.userNo}/${this.passWord}`,{
                    userNo : this.userNo, 
                    passWord : this.passWord
                })
                .then(function(res){
                    if(res.data==''){  // 我这里采用了判断数据是否为空来进行判断是否登录成功（后端自己设定）。
                        alert('登录失败！')
                    }else{
                        // 将用户名保存在sessionStorage中，当页面关闭时，自动销毁（为了防止页面关闭重新打开后，页面依然显示登录状态）
                        sessionStorage["username"] = res.data.userName  
                        if(remMe){ // 如何用户选中了记住我，则保存用户信息
                            UserInfo.userNo = res.data.userNo;
                            UserInfo.passWord = res.data.autoLoginTag;
                            UserInfo.remMe = remMe;
                            console.log(UserInfo)
                            localStorage["UserInfo"] = JSON.stringify(UserInfo); // 将对象转换之后保存
                            localStorage["token"] = res.data.token // 用户每次登录生成的Token，后续将使用Token验证通过才能查询数据
                        }else{ // 用户未选中则清空localStorage数据
                            localStorage.removeItem("UserInfo")  
                            localStorage.removeItem("token")
                        }
                        location.href='PostList.html'
                    }
                })
            },
            back:function(){
                window.history.go(-1)
            }
        }
    })
</script>

4、数据库表Users解析

C#属性名称	C#类型	字段作用
Id	int	id编号主键，自动整长
UserNo	string	用户账号
UserName	string	用户昵称
UserLevel	int	用户等级
Password	string	密码，采用MD5加密保存
IsDelete	bool	是否已经停用（软删除）
Token	GUID	用户登录之后生成的Token（每次登录都会进行刷新）
AutoLoginTag	GUID	用户无密码登录的验证Token（当用户重新使用密码登录时更新）
AutoLoginLimitTime	DateTime	无密登录过期时间

5、后端控制器代码解析

   /// <summary>
    /// 根据账户名和密码登录
    /// </summary>
    /// <param name="userNo"> </param>
    /// <param name="passWord"> </param>
    /// <returns> </returns>

    [HttpGet("{userNo}/{passWord}")]
    public MyBBSDB_Users GetLoginRes(string userNo, string passWord)
    {
        List<MyBBSDB_Users> userList = _iUserBll.GetUserByUserNoAndPassword(userNo, passWord.ToMd5()); // 根据密码查询账号和密码是否登录成功
        if (userList.Count <= 0) //用户名和密码登录失败
        {
            userList = _iUserBll.GetUserByUserNoAndAutoLoginTag(userNo, passWord); // 使用账号+无密Token登录验证
            if (userList == null) // 登录失败
            {
                userList = new List<MyBBSDB_Users>();
                return default; // 返回null
            }
            userList = userList.FindAll(p => p.AutoLoginLimitTime > DateTime.Now).ToList(); // 账号+无密Token登录成功验证是否过期
            if (userList.Count <= 0)
            {
                return default;  // 过期返回null
            }
            else
            {
                return GetLoginResult(userList, false);
            }
        }
        return GetLoginResult(userList, true);
    }

    /// <summary>
    /// 获取用户信息并且更新token和auotLoginToken 注：密码登录更新autoLoginTag
    /// </summary>
    /// <param name="userList"> </param>
    /// <returns> </returns>
    private MyBBSDB_Users GetLoginResult(List<MyBBSDB_Users> userList, bool isPasswordLogin)
    {
        MyBBSDB_Users user = userList.Find(p => !p.IsDelete); // 检测用户是否停用
        user.Token = Guid.NewGuid(); // 重新生成Token
        if (isPasswordLogin) // 是否密码登录
        {
            user.AutoLoginTag = Guid.NewGuid(); // 更新无密Token
            user.AutoLoginLimitTime = DateTime.Now.AddDays(7); // 无密Token时间+7天
        }
        _iUserBll.UpdateUser(user); // 更新user到数据库
        return user; // 返回user信息
    }