我应该使用Express和EJS的res.render或res.redirect吗?

时间:2017-12-14 20:50:12

标签: node.js express ejs

我对这个话题非常陌生。我想了解更多关于何时使用渲染和重定向的信息。目标是在用户点击按钮或登录后将我的用户转到另一个页面。这个新页面需要数据,因此我在渲染命令期间传递了这些数据。这工作正常,但页面URL不代表他们当前正在查看的正确页面。在这种情况下,我想知道我是否应该进行重定向。以下是我的代码。 这是我的server.js页面的代码片段

    // route for user Login
app.route('/login')
    .get(sessionChecker, (req, res) => {
        res.render('login');
    })
    .post((req, res) => {
        var username = req.body.username,
            password = req.body.password;

        User.findOne({ where: { username: username } }).then(function (user) {
            if (!user) {
                res.render('login');;
            } else if (!user.validPassword(password)) {
                res.render('login');;
            } else {
                req.session.user = user.dataValues;
                res.render('dashboard',{
                    "token" :  createToken(req),
                    "user" : req.session.user
                 });
            }
        });
    });

这是我的.ejs页面的代码片段

<% if( typeof user !== "undefined") { %>

                    <li><a href="/dashboard">Dashboard</a></li>
                    <li><a href="/reports">My Reports</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">Separated link</a></li>
                            <li role="separator" class="divider"></li>
                            <li><a href="#">One more separated link</a></li>
                        </ul>
                    </li>

                    <% } %>

这是我的server.js页面的完整代码。

var express = require('express');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var session = require('express-session');
var morgan = require('morgan');
var User = require('./models/user');
var crypto = require('crypto');

// invoke an instance of express application.
var app = express();

// set our application port
app.set('port', 9000);

app.set('view engine', 'ejs');
app.set('views', 'views');

// set morgan to log info about our requests for development use.
app.use(morgan('dev'));

// initialize body-parser to parse incoming parameters requests to req.body
app.use(bodyParser.urlencoded({ extended: true }));

// initialize cookie-parser to allow us access the cookies stored in the browser. 
app.use(cookieParser());

// initialize express-session to allow us track the logged-in user across sessions.
app.use(session({
    key: 'user_sid',
    secret: 'somerandonstuffs',
    resave: false,
    saveUninitialized: false,
    cookie: {
        expires: 600000
    }
}));


// This middleware will check if user's cookie is still saved in browser and user is not set, then automatically log the user out.
// This usually happens when you stop your express server after login, your cookie still remains saved in the browser.
app.use((req, res, next) => {
    if (req.cookies.user_sid && !req.session.user) {
        res.clearCookie('user_sid');        
    }
    next();
});


// middleware function to check for logged-in users
var sessionChecker = (req, res, next) => {
    if (req.session.user && req.cookies.user_sid) {
        res.render(req.originalUrl.substr(1, req.originalUrl.length),{
            "token" :  createToken(req),
            "user" : req.session.user
         });
    } else {
        next();
    }    
};

// route for Home-Page
app.get('/', sessionChecker, (req, res) => {
    res.redirect('/login');
});


// route for user signup
app.route('/signup')
    .get(sessionChecker, (req, res) => {
        //res.sendFile(__dirname + '/public/signup.html');
        res.render('signup');
    })
    .post((req, res) => {
        User.create({
            username: req.body.username,
            email: req.body.email,
            password: req.body.password,
            roles: req.body.roles
        })
        .then(user => {
            req.session.user = user.dataValues;
            res.render('dashboard',{
                "token" :  createToken(req),
                "user" : req.session.user
             });
        })
        .catch(error => {
            res.render('signup');
        });
    });


// route for user Login
app.route('/login')
    .get(sessionChecker, (req, res) => {
        res.render('login');
    })
    .post((req, res) => {
        var username = req.body.username,
            password = req.body.password;

        User.findOne({ where: { username: username } }).then(function (user) {
            if (!user) {
                res.redirect('/login');;
            } else if (!user.validPassword(password)) {
                res.redirect('/login');;
            } else {
                req.session.user = user.dataValues;
                res.render('dashboard',{
                    "token" :  createToken(req),
                    "user" : req.session.user
                 });
            }
        });
    });


// route for user's dashboard
app.get('/dashboard', (req, res) => {
    if (req.session.user && req.cookies.user_sid) {

        res.render('dashboard',{
           "token" : createToken(req),
           "user" : req.session.user
        });
    } else {
        res.render('login');
    }
});

// route for user's reports
app.get('/reports', (req, res) => {
    if (req.session.user && req.cookies.user_sid) {

        res.render('reports',{
           "token" : createToken(req),
           "user" : req.session.user
        });
    } else {
        res.render('login');
    }
});

// route for user's profile
app.route('/user_profile')
.get(sessionChecker, (req, res) => {
    res.render('user_profile');
})
.post((req, res) => {
    var username = req.body.username,
        password = req.body.password;

    User.findOne({ where: { username: username } }).then(function (user) {
        if (!user) {
            res.render('login');;
        } else if (!user.validPassword(password)) {
            res.render('login');;
        } else {
            req.session.user = user.dataValues;
            res.render('dashboard',{
                "token" :  createToken(req),
                "user" : req.session.user
             });
        }
    });
});

// route for user logout
app.get('/logout', (req, res) => {
    if (req.session.user && req.cookies.user_sid) {
        res.clearCookie('user_sid');
        res.render('login');;
    } else {
        res.render('login');;
    }
});




// route for handling 404 requests(unavailable routes)
app.use(function (req, res, next) {
  res.status(404).send("Sorry can't find that!")
});


// start the express server
app.listen(app.get('port'), () => console.log(`App started on port ${app.get('port')}`));

function createToken(req){
    var data = 'u=' + req.session.user.username + "|o=organization_1";  

    if (req.session.user.roles.length > 0){
        data += "|r=" + req.session.user.roles;
    }

    var buff = new Buffer(data);  
    var base64data = buff.toString('base64');

    console.log(base64data);  

    return base64data
}

1 个答案:

答案 0 :(得分:3)

res.redirect(someURL)是您想要向浏览器返回30x状态代码并告诉浏览器转到新网址。这通常在服务器上作为登录过程的一部分完成,有时当用户发现自己处于已更改为不同内容的旧URL时。 res.redirect()只应用于这些类型的强制导航到不同的URL,并且永远不应成为任何标准渲染过程的一部分。

res.render(filename, data)是人们通常如何使用EJS(或插入Express的任何其他模板引擎)用一些数据填充模板并返回&#34;呈现的#34; HTML页面返回到请求的浏览器,以便浏览器可以呈现它。

在你问题中显示的特定情况下,当你&#34;批准&#34;登录后,您可能希望对登录后希望用户启动的任何URL执行res.redirect(),然后为该URL创建一个路由,您将使用res.render()来呈现该页面。

步骤将如下所示:

  1. 用户转到/login
  2. 用户使用表单POST提交登录数据。
  3. 服务器验证数据并建立登录会话。
  4. 服务器执行res.redirect('/home')(或您想要的任何网址)告诉浏览器转到新网址。
  5. 浏览器处理重定向并发送对该新页面的请求。
  6. 服务器查看新页面的请求,并使用res.render()呈现该页面的数据。
  7. 浏览器在新网址上显示已呈现的网页。