从身份验证到网站-不匹配

Question

I have an react/express/socket.io application that works fine without authentication. 我有一个react/express/socket.io应用程序，无需身份验证即可正常工作。 I have ported the application to use Passport authentication. 我已将应用程序移植为使用Passport身份验证。 The authentication runs fine. 身份验证运行正常。 The application runs fine without authentication. 该应用程序无需身份验证即可正常运行。 However, the two together have a impedance mismatch. 然而，两者一起具有阻抗失配。

My directory structure is as follows: 我的目录结构如下：

[idf@node3 react-ts]$ ls -la
total 32
drwxrwxr-x  6 idf idf 4096 Mar  6 23:13 .
drwxrwxr-x 23 idf idf 4096 Mar  6 22:52 ..
drwxrwxr-x  7 idf idf 4096 Mar  6 21:49 backup
drwxrwxr-x  3 idf idf 4096 Mar  6 22:32 client
drwxrwxr-x  8 idf idf 4096 Mar  7 01:42 .git
-rw-rw-r--  1 idf idf   21 Feb  7 23:25 .gitignore
-rw-rw-r--  1 idf idf 1181 Mar  6 23:13 package.json
drwxrwxr-x  4 idf idf 4096 Mar  7 01:26 server
[idf@node3 react-trader]$

critically with client being 严格地与client

[idf@node3 client]$ ls
www
[idf@node3 client]$ 

[idf@node3 www]$ ls -la
total 24
drwxrwxr-x 4 idf idf 4096 Feb 14 00:34 .
drwxrwxr-x 3 idf idf 4096 Mar  6 22:32 ..
drwxrwxr-x 2 idf idf 4096 Feb  8 00:00 css
-rw-rw-r-- 1 idf idf  593 Mar  2 04:33 index.html
-rw-rw-r-- 1 idf idf 1362 Feb 14 00:30 index.html.hide
drwxrwxr-x 2 idf idf 4096 Mar  5 23:44 js
[idf@node3 www]$ 

[idf@node3 js]$ ls -la
total 36
drwxrwxr-x 2 idf idf  4096 Mar  5 23:44 .
drwxrwxr-x 4 idf idf  4096 Feb 14 00:34 ..
-rw-rw-r-- 1 idf idf 16438 Mar  6 00:34 app.js
-rw-rw-r-- 1 idf idf   348 Feb 17 05:42 feed-socketio.js
[idf@node3 js]$

The way I used to display the website without auth was to say: 我以前没有认证就显示网站的方式是说：

app.use(express.static(path.join(__dirname, '../client/www')));
...lots of code here...
http.listen(8080, function () {
    console.log('listening on: 8080');
});

However, after adding authentication front end, if I add the same path this time giving not just the directory but the main index.html file, successRedirect: '../client/www/index.html', 但是，在添加身份验证前端之后，如果这次我添加相同的路径，不仅给出目录，还给出主要的index.html文件， successRedirect: '../client/www/index.html', index.html successRedirect: '../client/www/index.html',

//sends the request through our local login/signin strategy, 
//and if successful takes user to homepage, 
//otherwise returns then to signin page
app.post('/login', passport.authenticate('local-signin', {
  successRedirect: '../client/www/index.html',
  failureRedirect: '/signin'
  })
);

upon successful login the browser comes back and says: 成功登录后，浏览器返回并显示：

Cannot GET /client/www/index.html

Part of the authentication looks like this: 身份验证的一部分如下所示：

//displays our homepage
app.get('/', function(req, res){
  res.render('home', {user: req.user});
});

It feels like I should be returning / in successRedirect and then rewriting app.get('/) to somehow do the same magic that app.use(express.static(path.join(__dirname, '../client/www'))); 感觉我应该返回/ in successRedirect然后重写app.get('/)以某种方式做与app.use(express.static(path.join(__dirname, '../client/www'))); does. 确实。 Thing is, the application is not just a static page, but a dynamically generated web page through app.js . 事实是，该应用程序不仅是静态页面，而且是通过app.js动态生成的网页。 The real work is done by app.js the last line of the file which reads: 真正的工作是由app.js完成的，该文件的最后一行显示为：

var HomePage = React.createClass({
    getInitialState: function(){
    ...
    },
    ...
});

React.render(<HomePage />, document.getElementById('main'));

The file index.html is just a shell: 文件index.html只是一个shell：

<!DOCTYPE html>
<html>
<head>
    <title>Trader Desktop</title>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/styles.css" type="text/css"/>
    <script src="/socket.io/socket.io.js"></script>
    <script src="js/feed-socketio.js"></script>    
    <script type="text/jsx" src="js/app.js"></script>
</head>

<body>
<div class="container" id="main">    
</div>
</body>
</html>

In the authentication part of the application, on successful login, we see it is taking me to a file main.handlebars , as given here: 在应用程序的身份验证部分，成功登录后，我们看到它将我带到文件main.handlebars ，如下所示：

// Configure express to use handlebars templates
var hbs = exphbs.create({
    defaultLayout: 'main',
});
app.engine('handlebars', hbs.engine);
app.set('view engine', 'handlebars');

This file is inside a subdirectory called views and inside there a directory called layout : 该文件在一个名为views的子目录中，在其中一个名为layout的目录中：

[idf@node3 server]$ ls -la
total 64
drwxrwxr-x   4 idf idf  4096 Mar  7 01:26 .
drwxrwxr-x   6 idf idf  4096 Mar  6 23:13 ..
-rw-rw-r--   1 idf idf   475 Mar  7 00:01 config.js
-rw-rw-r--   1 idf idf  8274 Mar  2 19:28 feed.js
-rw-rw-r--   1 idf idf  2408 Mar  7 00:01 functions.js
drwxrwxr-x 440 idf idf 20480 Mar  6 23:37 node_modules
-rw-rw-r--   1 idf idf  1198 Mar  6 23:37 package.json
-rw-rw-r--   1 idf idf  7144 Mar  7 01:28 server.js
drwxrwxr-x   3 idf idf  4096 Mar  6 23:41 views

[idf@node3 views]$ ls -la
total 20
drwxrwxr-x 3 idf idf 4096 Mar  6 23:41 .
drwxrwxr-x 4 idf idf 4096 Mar  7 01:26 ..
-rw-rw-r-- 1 idf idf  756 Mar  6 23:41 home.handlebars
drwxrwxr-x 2 idf idf 4096 Mar  6 23:41 layouts
-rw-rw-r-- 1 idf idf 1952 Mar  6 23:41 signin.handlebars
[idf@node3 views]$ 


[idf@node3 layouts]$ ls -la
total 12
drwxrwxr-x 2 idf idf 4096 Mar  6 23:41 .
drwxrwxr-x 3 idf idf 4096 Mar  6 23:41 ..
-rw-rw-r-- 1 idf idf 2734 Mar  6 23:41 main.handlebars
[idf@node3 layouts]$

I am probably missing something very simple, but not sure what the fix is. 我可能错过了一些非常简单的内容，但不确定是什么解决方法。 In essence, I need the authentication to pass control to express / react / socket.io - not to a static home page . 本质上，我需要身份验证来传递控制权，以express / react / socket.io 而不是静态首页 。

Answer 1

The login success redirect should point to the public URL your application is being served from, not a file path internal to your app. 登录成功重定向应该指向从中提供应用程序的公共URL，而不是应用程序内部的文件路径。

successRedirect: '/'

Moving your app from static content app.use(express.static('blah')) to using a dynamic page app.get(/,(res,res)=>...) is a fairly big change in itself. 将您的应用程序从静态内容app.use(express.static('blah'))移至使用动态页面app.get(/,(res,res)=>...)本身就是一个很大的变化。 Make sure your app works using just the dynamic / route without the static middleware before trying to add the authentication. 在尝试添加身份验证之前，请确保您的应用仅使用动态/路由而不使用静态中间件工作。

Answer 2

It was very easy indeed, but the solution is subtle. 确实确实很容易，但是解决方案却很微妙。

successRedirect: '/index.html'

is correct, but the section of code has to change so that the app.use is right before the http.listen. 是正确的，但是必须更改代码部分，以便app.use 就在 http.listen 之前。 Simple, but it took forever to figure out. 很简单，但是花了很长时间才弄清楚。

lots of code above...
app.use(express.static(path.join(__dirname, '../client/www')));

http.listen(8080, function () {
    console.log('listening on: 8080');
});

There is only one problem left now. 现在只剩下一个问题。 The user can type in http://www.website.com/index.html and bypass authentication. 用户可以输入http://www.website.com/index.html并绕过身份验证。 I don't think that is hard to fix but don't know how to do it right now. 我不认为这很难解决，但是现在不知道该怎么做。

从身份验证到网站-不匹配

问题描述

2 个解决方案

解决方案1
0 2017-03-07 00:41:37

解决方案2
0 2017-03-07 17:13:05

从身份验证到网站-不匹配

问题描述

2 个解决方案

解决方案1 0 2017-03-07 00:41:37

解决方案2 0 2017-03-07 17:13:05

解决方案1
0 2017-03-07 00:41:37

解决方案2
0 2017-03-07 17:13:05