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

【问题标题】：From authentication to website - a mismatch从身份验证到网站 - 不匹配
【发布时间】：2017-07-27 01:22:24
【问题描述】：

我有一个react/express/socket.io 应用程序，无需身份验证即可正常工作。我已移植应用程序以使用Passport 身份验证。身份验证运行良好。该应用程序无需身份验证即可正常运行。但是，两者加在一起会出现阻抗不匹配。

我的目录结构如下：

[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]$

批判地对待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]$

我过去在没有身份验证的情况下显示网站的方式是：

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

但是，在添加身份验证前端之后，如果我这次添加相同的路径，不仅给出目录，还给出主 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'
  })
);

成功登录后，浏览器会返回并显示：

Cannot GET /client/www/index.html

部分身份验证如下所示：

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

感觉我应该在successRedirect 中返回/，然后重写app.get('/) 以某种方式实现与app.use(express.static(path.join(__dirname, '../client/www'))); 相同的魔法。问题是，该应用程序不是只是一个静态页面，而是通过app.js 动态生成的网页。真正的工作是由app.js 文件的最后一行完成的：

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

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

文件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>

在应用程序的身份验证部分，成功登录后，我们看到它会将我带到一个文件 main.handlebars，如下所示：

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

该文件位于名为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]$

我可能遗漏了一些非常简单的东西，但不确定修复方法是什么。本质上，我需要身份验证才能将控制权传递给express/react/socket.io - 不是静态主页。

【问题讨论】：

标签： node.js reactjs express socket.io handlebars.js

【解决方案1】：

登录成功重定向应指向您的应用程序所使用的公共 URL，而不是应用程序内部的文件路径。

successRedirect: '/'

将您的应用从静态内容 app.use(express.static('blah')) 移动到使用动态页面 app.get(/,(res,res)=>...) 本身就是一个相当大的变化。在尝试添加身份验证之前，请确保您的应用仅使用动态 / 路由而不使用静态中间件运行。

【讨论】：

无法获取 /index.html。它不可能找到 index.html 没有 app.use(express.static(path.join(__dirname, '../client/www')));但如果我最初在浏览网站时将其放入其中，它会将我带到网站而不是身份验证页面。
我在原帖中添加了一些我认为有用的线索。
@Ivan 是的，将静态中间件更改为动态路由起了作用。更新
Matt 当您说“在尝试添加身份验证之前确保您的应用仅使用动态/路由而不使用静态中间件”时，您能否指出一个更改 express 的示例，以便我有手动“渲染”主页而不是系统为我做？
顺便说一句，我可能说错了。被渲染的页面只是 index.html，然后中间件调用 app.js，所以这可能比我想象的要容易。请参阅原始帖子。

【解决方案2】：

这确实很容易，但解决方案很微妙。

successRedirect: '/index.html'

是正确的，但代码部分必须更改，以便app.use 就在 http.listen 之前。很简单，但花了很长时间才弄明白。

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

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

现在只剩下一个问题了。用户可以输入http://www.website.com/index.html 并绕过身份验证。我不认为这很难解决，但现在不知道该怎么做。

【讨论】：