2017-12-14 10 views
0

저는이 주제에 대해 매우 신났습니다. 렌더링 및 리디렉션을 사용해야 할시기에 대해 자세히 알고 싶습니다. 목표는 버튼을 클릭하거나 로그인 한 후 내 사용자를 다른 페이지로 이동시키는 것입니다.이 새 페이지에는 데이터가 필요하므로이 데이터를 렌더링 명령 중에 전달합니다. 이것은 현재 페이지 URL이 현재보고있는 올바른 페이지를 나타내지 않는다는 점을 제외하고는 정상적으로 작동합니다. 이것은 내가 리디렉션을해야하는지 궁금해하는 경우입니다. 아래는 제 코드입니다. Express 및 EJS에서 res.render 또는 res.redirect를 사용해야합니까?

// 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 페이지에서 코드의 조각 내 server.js 페이지에 대한 코드의 조각이다

<% 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> 

        <% } %> 

이 내 서버에서 전체 코드입니다 .js 페이지. 브라우저에 30 개 배 상태 코드를 반환하고 새로운 URL로 이동 브라우저를 말하고 싶어 위해

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 
} 
+0

리디렉션 한 다음 별도의 끝점에서 필요한 것을 렌더링해야합니다. 자세한 정보 [여기] (http://expressjs.com/en/api.html#res.redirect). – oneturkmen

답변

0

res.redirect(someURL)이다. 이것은 종종 로그인 프로세스의 일부로 서버에서 수행되며 때로는 사용자가 이전 URL에서 다른 것으로 변경된 것을 발견 할 때가 있습니다. res.redirect()은 이러한 유형의 강제 탐색을 다른 URL에 대해서만 사용해야하며 표준 렌더링 프로세스의 일부가되어서는 안됩니다.

res.render(filename, data)은 일반적으로 일부 데이터가있는 템플릿을 채우고 요청한 브라우저에 "렌더링 된"HTML 페이지를 반환하여 브라우저에서 렌더링 할 수 있도록 EJS (또는 Express에 연결된 다른 템플릿 엔진)를 사용하는 방법입니다. 당신이 로그인, 당신은 다음 res.redirect()는 사용자가 생성 한 후 로그인 이후에 시작하고 원하는 URL에 수행 할 수 있습니다 "승인"당신이 당신의 질문에 표시 특정한 경우에,


해당 페이지를 렌더링하기 위해 res.render()을 사용할 해당 URL에 대한 경로.

단계는 다음과 같이 표시됩니다 :

  1. 사용자 /login로 이동합니다.
  2. 사용자가 POST 양식으로 로그인 데이터를 제출합니다.
  3. 서버는 데이터의 유효성을 검사하고 로그인 세션을 설정합니다.
  4. 서버는 res.redirect('/home') (또는 여기에서 원하는 모든 URL)을 사용하여 브라우저에 새 URL로 이동하도록 지시합니다.
  5. 브라우저가 리디렉션을 처리하고 해당 새 페이지에 대한 요청을 보냅니다.
  6. 서버는 새 페이지에 대한 요청을보고 res.render()을 사용하여 해당 페이지에 대한 데이터를 렌더링합니다.
  7. 브라우저는 새 URL에 렌더링 된 페이지를 표시합니다.
+0

나는 이것과 함께가는 또 다른 질문을 가지고있다. 렌더링 옵션을 사용하는 경우 올바른 URL을보고 있어도 URL에 항상 잘못된 페이지가 표시됩니다. 브라우저에서 URL을 업데이트/변경하려면 어떻게해야합니까? – user179981

+0

@ user179981 - 나는 내 대답에서'/ login'을 위해 무엇을해야 하는지를 이미 알고 있다고 생각했습니다.먼저 원하는 URL로 리디렉션 한 다음 브라우저가 해당 URL을 요청하면 해당 새 URL에 대한 경로가 렌더링 된 다음 URL 및 페이지 내용이 모두 원하는대로 유지됩니다. – jfriend00

+0

나는 당신이 추천 한대로 변경했고 정확히했다. 이것은 잘 돌아 갔지만 모든 후속 조치에 대해서는 응용 프로그램에 대한 호출이 아닙니다. 내 실수로 내 오류를 표시 할 수 있도록 모든 코드로 내 게시물을 업데이트했습니다. 고맙습니다! – user179981