asp.net core中cshtml前端使用JS记住密码并简单加密解密密码

uoz98

已于 2024-04-17 09:17:53 修改

阅读量196

点赞数 1

文章标签：前端 javascript asp.net

于 2024-04-17 09:15:01 首次发布

本文链接：https://blog.csdn.net/weixin_52625246/article/details/137855230

版权

本文介绍了如何在ASP.NETCore的CSHTML页面中使用JavaScript实现用户登录时的记住密码功能，包括设置和获取cookie，以及对密码进行简单的加密和解密操作。

摘要由CSDN通过智能技术生成

参考其他博主的帖子后基于asp.net core在cshtml使用JS记住密码并简单加密解密密码，在这里没有接上登录方法，只有记住密码功能。

参考文章地址：纯js实现记住密码_js 记住密码-CSDN博客

cshtml:

 <form asp-action="Login">
     <div asp-validation-summary="All" class="text-danger"></div>
     <div class="form-group">
         <label asp-for="UserName" class="label_title">账号</label>
         <span class="required">*</span>
         <input asp-for="UserName" class="form-control username" />
         <span asp-validation-for="UserName" class="text-danger"></span>
     </div>
     <div class="form-group">
         <label asp-for="Password" class="label_title">密码</label>
         <span class="required">*</span>
         <input asp-for="Password" class="form-control password" type="password" />
         <span asp-validation-for="Password" class="text-danger"></span>
     </div>
     <button type="submit" class="login-page-loginBtn  btn-default">登录</button>
     <section class="login-page-option">
      <div class="rember_pw ">
        <input type="checkbox" id="remember" class="remember"  />
        <label for="remember">记住密码</label>
      </div>
     </section>
 </form>

只附上了记住密码的方法，登录需要另外编写。

JS:

<script>

    /**
     * 记住密码
     */

    // 存储cookie
        function setCookie(name, value, day) {
            let date = new Date();
            date.setDate(date.getDate() + day);
            document.cookie = name + '=' + value + ';expires=' + date;
        }

        // 获取cookie
        function getCookie(name) {
            let reg = RegExp(name + '=([^;]+)');
            let arr = document.cookie.match(reg);
            if (arr) {
                return arr[1];
            } else {
                return '';
            }
        }

        // 删除cookie
        function delCookie(name) {
            setCookie(name, null, -1);
        }

        var user = document.querySelector('.username');
        var pwd = document.querySelector('.password');
        var isRem = document.querySelector('.remember');
        if (getCookie('username') && getCookie('password')) {
            user.value = getCookie('username');
            //在这里使用window.atob解密密码
            var gpwd = window.atob(getCookie('password'))
            pwd.value = gpwd
            isRem.checked = true;
        }

        // 判断是否勾选记住密码
        isRem.addEventListener('change', function () {
            // 若未勾选，清除cookie
            if (!this.checked) {
                delCookie('username');
                delCookie('password');
            }
            if (isRem.checked) {
                setCookie('username', user.value, 7);
                //使用window.btoa加密密码
                var cpwd = window.btoa(pwd.value)
                setCookie('password', cpwd, 7);

            }
        })
</script>