当前位置：首页 > news >正文

Node.js + Express 4.x + MongoDB 构建登录注册（二）

news 来源：原创 2024/4/19 9:50:32

　　上回的“登录”基本完成，可是login和home拿到的对象是两个user对象。

　　为此祭出大招session。

　　PS：只展示与改动有关的代码，其他代码不变，故省略...

一、安装、配置session

　　“命令提示符”执行：npm install express-session

　　安装完了，还需要配置，打开“app.js”文件：

//新增，跟在一大堆require后面即可
const session=require('express-session');

//然后在该位置配置session
var app = express();

app.use(session({
    secret:'secret',
    cookie:{maxAge:1000*60*30},  //30分钟
    resave:false,
    saveUninitialized:true
}));

//登录以后，将user对象存入session，再交给response对象，用于页面显示
app.use(function(req,res,next)
{
    res.locals.user=req.session.user;
    next();
});

二、修改“登录”

　　打开“index.js”：

//修改login路由
router.route('/login').get(function(req,res)
{
    res.render('login',{title:'Login'});
}).post(function(req,res)
{
    //因为还没有连接数据库，数据还是假的
    let user={username:'admin',password:'123'};
    if(req.body.username==user.username&&req.body.password==user.password)
    {
        req.session.user=user;  //将user对象存入session
        return res.redirect('home');
    }
    else
    {
        return res.redirect('login');
    }
});

//修改home路由，去掉声明user对象和向页面传递对象
router.get('/home',function(req,res)
{
    return res.render('Home',{title:'Home'});
});

//修改logout路由，注销时，清空session
router.get('/logout',function(req,res)
{
    req.session.user=null;
    return res.redirect('/');
});

　　再刷新index.html页面，会发现“登录”流程和原来没有区别。

　　对，感官上没有区别，但是后面将user对象存入session，这时，login和home共用同一个user对象。

　　也暴露了问题。

三、拦截

　　问题一：在没有登录的状态，手动输入地址：“http://localhost:3000/home” 页面会报500错，home页面的<%=user.username%>无法取到值，因为没有登录，req.session.user是空的，转而res.locals.user也是空的。

　　问题二：在登录状态（不注销），手动输入地址：“http://localhost:3000/login” 页面还是在登录，用户已经登录了，不应该还要登录。

　　问题三：没有错误提示，比如密码输错了。

　　为了解决这两个问题，我们需要拦截请求加以判断。

　　解决问题一、二，打开index.js：

//all()响应所有请求，get()响应get请求，post()响应post请求
//最后的next()一定要有
//将错误提示信息存入session
router.route('/login').all(function(req,res,next)
{
    if(req.session.user)
    {
        req.session.error="您已登录！";
        return res.redirect('home');
    }
    next();
}).get(function(req,res)
{
    res.render('login',{title:'Login'});
}).post(function(req,res)
{
    //因为还没有连接数据库，数据还是假的
    let user={username:'admin',password:'123'};
    if(req.body.username==user.username&&req.body.password==user.password)
    {
        req.session.user=user;  //将user对象存入session
        return res.redirect('home');
    }
    else
    {
        req.session.error='用户名或者密码错误！';
        return res.redirect('login');
    }
});

//登录通过以后，进入Home页面
router.route('/home').all(function(req,res,next)
{
    if(!req.session.user)
    {
        req.session.error='请先登录!';
        return res.redirect('login');
    }
    next();
}).get(function(req,res)
{
    return res.render('Home',{title:'Home'});
});

　　问题一、二解决了，问题三的错误信息也存入了session，现在要在页面显示出来，先修改app.js里面关于session配置的代码：

app.use(function(req,res,next)
{
    res.locals.user=req.session.user;
    let err=req.session.error;
    delete req.session.error;
    res.locals.message='';
    if(err)
    {
        res.locals.message='<div class="fuzq_message">'+err+'</div>';
    }
    next();
});

　　错误提示信息代码已经准备好，就差前端显示了，分别打开login.html和home.html：

　　(PS：两个页面，我都是加在h1标签上面，大家随意。)