用户登录的理解

59 阅读1分钟

用户登录实践

0.概述

常规用户访问系统,会被拦截到登录页,登录后浏览器会保留cookie,在cookie的有效期内,用户再访问根路径,就会跳转到首页。
这里主要涉及以下几个部分:
  • 1.访问根路径,尚无cookie,跳转到登录页
  • 2.登录页的GET和POST处理
  • 3.后端对身份进行验证,成功后允许访问首页
  • 4.访问页面,对cookie校验,验证失败,返回 403 错误
  • 5.退出登录,清除cookie

1.登录页

登录页采用用户名和密码的方式,密码经过对称加密传输

<body class="verify-body">
<div class="row" >
    <div class="col-md-4 col-md-offset-4" >
        <div class="panel panel-default">
            <div class="panel-heading">
                <span style="color: #30a5ff;">
                    用户登录
                </span>
            </div>
            <div class="tab-content">
                <div class="panel-body" >
                    <div class="form-group">
                        <div class="form-group">
                            <input class="form-control" id="name" type="text"
                                   placeholder="用户名">
                        </div>
                        <div class="form-group">
                            <input class="form-control" id="password" type="password"
                                                       placeholder="密码">
                        </div>
                        <button class="btn btn-primary col-md-12">用户登录</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

点击按钮,提交登录

        //提交登录请求
        $.ajax({
            url: "./system/login",
            type: "POST",
            timeout: null,
            contentType: "application/json; charset=utf-8",
            data: JSON.stringify({
                name: username,
                password: password,
            }),
            dataType: "json",
            success: function (obj) {
                window.location.replace(obj.url)
            },
            error: function (obj) {
                
            }
        })
app.post("/system/login", (function (req, res) {
   /*
        1.从数据库查询,校验用户名密码 
        2.校验成功,则设置cookie,跳转到主页
    */
}));

2.hbs页面渲染

模板和数据准备好,使用res.render(pagename, data)组装即可

3.其他