nodejs框架express实现登录

目录:

1. 访问视图
2. Post请求
3. Post请求 - body(1)
4. Post请求 - body(2)
5. Post登陆1
6. Post登陆2
7. 页面访问控制1
8. 页面访问控制2

访问视图

前面我们已经添加了视图模板并学习了访问视图的方法，那我们就先回顾一下。

1.参考以下代码，地址栏访问这几个请求路径查看是否可以成功。

app.get('/', function(req, res) {
　　res.render('index');
});
 
app.get('/login',function(req,res){
　　res.render('login');
});
 
app.get('/home',function(req,res){
　　res.render('home');
});

 

当浏览器看到了相应的视图页面就说明我们的代码是没有问题的，继续加油吧！

 

用户登陆

前面我们学习了express的get请求方法，今天我们就学习它的post请求方法。

1. post方法 —— 根据请求路径来处理客户端发出的Post请求。

2. 格式：app.post(path,function(req, res));

3. 和get方法一样，path为请求的路径，第二个参数为处理请求的回调函数，req和res分别代表请求信息和响应信息。

4. 例如处理login的post请求，如下示例

app.post('/login',function(req,res){

});

 

了解了post方法，下面我们就开始使用post来实现简单的用户登陆功能。

 

body基本用法

实现登陆之前我们先来了解一个属性 —— body。

body属性解析客户端的post请求参数，通过它可获取请求路径的参数值。

格式：req.body.参数名；

下面我们就来测试body属性的功能，做一些准备工作。

1. 修改login.html，为登陆按钮增加登陆事件。

<input type="button" onclick="login();" value="登 陆">

 

function login(){
    var username = $('#username').val();
    var data = { "username": username };
    $.ajax({
        url:'/login',
        type:'POST',
        data:data
    });
}        

 

2. 要想使用body属性解析post请求参数值，我们需要先安装和引用express的两个中间件body-parser和multer，具体方法如下：。

2.1 安装

npm install body-parser
npm install multer

2.2 引用和调用

var bodyParser = require('body-parser');
var multer = require('multer');
......
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());

 

中间件body-parser和multer用于处理和解析post请求的数据。

body基本用法

到这里我们就可以测试post请求的body属性的简单用法了。

1. 修改好之后的完整的文件app.js如下所示：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
 
app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
 
app.get('/',function(req,res){
　　res.render('login');
});
app.post("/login", function(req, res) {
　　console.log("用户名称为：" + req.body.username);
});
 
app.listen(80);

准备登陆

接下来我们就开始实现登陆功能，让我们要先做一些准备工作，为相关按钮添加点击事件、链接。

1. 修改index.html，增加登陆链接。

<p><a href="login">登 录</a></p>

2.强化login页面的login方法，实现一个简单的post请求：

function login(){
　　var username = $('#username').val();
　　var password = $('#password').val();
　　var data = { "username": username, "password":password};
　　$.ajax({
　　　　url:'login',
　　　　type:'POST',
　　　　data:data,
　　　　success:function(data,status){
　　　　　　if(status == 'success'){
　　　　　　　　location.href='home';
　　　　　　}
　　　　},　　
　　　　error:function(data,status,e){
　　　　　　if(status == "error"){
　　　　　　　　location.href='login';
　　　　　　}
　　　　}
　　});
}

 

网页模板准备已经就绪，下面我们开始修改启动文件app.js的内容。

 

准备登陆

下面我们就开始修改app启动文件的内容。

1. 修改post方法，这里假设数据库中用户名的名字为admin、密码为admin。

app.post('/login',function(req,res){
　　var user={
　　　　username:'admin',
　　　　password:'admin'
　　}
　　if(req.body.username==user.username&&req.body.password==user.password)
　　{
　　　　res.send(200);
　　}else{
　　　　res.send( 404 );
　　}
});

 

2. 一个完整的启动文件app.js如下所示：

var express = require('express');
var app = express();
var bodyParser = require('body-parser');
var multer = require('multer');
 
app.set('views', __dirname);
app.set( 'view engine', 'html' );
app.engine( '.html', require( 'ejs' ).__express );
 
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
app.use(multer());
 
app.get('/', function(req, res) {
　　res.render('index');
});
app.get('/home',function(req,res){
　　res.render('home');
});
app.get('/login',function(req,res){
　　res.render('login');
});
app.post('/login',function(req,res){
　　var user={
　　　　username:'admin',
　　　　password:'admin'
　　}
　　if(req.body.username==user.username&&req.body.password==user.password) {
　　　　res.send(200);
　　}else{
　　　　res.send( 404 );
　　}
});
 
app.listen(80);

到这里，一个简单的Post登录就完成了，使用浏览器运行本地端口试试效果吧！

访问控制

简单登陆部分按照我们的求已经完成了，但网站好些并不安全，反复测试我们发现，home.html页面本来是登陆以后才访问的，现在我们不需登陆，直接在浏览器输入也可访问，这样肯定是不能被允许的，那么我们还得再次对登陆功能进行强化。

1. login.html页面增加EJS模板变量<%- message %>保存登陆提示信息。

...
<%- message %>
<h1>用户登录</h1>
...

2. home.html页面，登陆成功后跳转并传入用户名：

<h1>恭喜<em style="color:red"><%= user.username %></em>，登陆成功！</h1>

PS：使用EJS模板变量值使用<%= variable_name %>输出方式，字符串输出时默认经过escape转义编码。 当我们想要输出一些动态生成的HTML标签时可使用<%- variable_nam %>输出方式，这种方式不会被escape转义编码。

3. home.html页面添加退出链接，如下：

<p><a href="logout">退 出</a></p>

访问控制

修改好了模板页，下面开始修改启动文件app.js的内容。

1. 安装模块express-session并引用，安装、引用不在讲述。

2. 使用新模块进行访问时间限制，如下：

var session = require('express-session');
...
app.use(session({
    secret:'secret',
    resave:true,
    saveUninitialized:false,
    cookie:{
        maxAge:1000*60*10 //过期时间设置(单位毫秒)
    }
}));

3. app.js文件新增中间件并设置模板变量值，如下：

app.use(function(req, res, next){
　　res.locals.user = req.session.user;
　　var err = req.session.error;
　　res.locals.message = '';
　　if (err) res.locals.message = '<div style="margin-bottom: 20px;color:red;">' + err + '</div>';
　　next();
});

res.locals对象保存在一次请求范围内的响应体中的本地变量值。

PS：注意，中间件的放置顺序很重要，等同于执行顺序。而且，中间件必须放在HTTP动词方法之前，否则不会执行。

4. 增加logout路径处理(用户登陆退出)和index路径请求处理，如下：

app.get('/logout', function(req, res){
　　req.session.user = null;
　　req.session.error = null;
　　res.redirect('index');
});
app.get('/index', function(req, res) {
　　res.render('index');
});

5. 修改home路径请求处理，如下：

app.get('/home',function(req,res){
　　if(req.session.user){
　　　　res.render('home');
　　}else{
　　　　req.session.error = "请先登录"
　　　　res.redirect('login');
　　}
});

6. 修改路径为login的Post请求

app.post('/login',function(req,res){
　　var user={
　　　　username:'admin',
　　　　password:'admin'
　　}
　　if(req.body.username==user.username&&req.body.password==user.password){
　　　　req.session.user = user;
　　　　res.send(200);
　　}else{
　　　　req.session.error = "用户名或密码不正确";
　　　　res.send( 404 );
　　}
});

 参考资料：http://www.hubwiz.com/course/544db33888dba01ef09d0682/