HTML 文件在记录后不会出现，没有任何错误

Question

我是服务器端编程的新手。 我正在尝试在身份验证后提供HTML文件(mapview.html(，但它没有出现任何错误。 身份验证过程没有问题。我希望当我单击登录按钮时，代码会检查要求数据 验证后，MapView.html弹出，但没有任何反应。res.sendFile(( 在 jquery 部分、console.log(res( 中的原因，在 chrome 的控制台行中获取我的所有 html 代码。

---

文件目录：

src
index.js
db 
public 
index.html
mapview.html
middleware 
auth.js
routers 
user
task
model
user
task

---

索引.html

$('div[name="logIn"]').click( () => { // select a div element that its name is logIn
console.log('LOG-IN:')                 
$.ajax({
url: '/login',
data: $('#loginForm').serialize(), // Get email and pass from login form 
type: 'POST',
success: function (res) {                                      
console.log(res)                       
}   
})
})

---

用户.js

router.post('/login', async (req, res) => {
try {
const user = await User.findByCredentials(req.body.email, req.body.password)
const token = await user.generateAuthToken()        
const publicDir = path.join(__dirname, '../public')          
res.sendFile(path.join(publicDir + '/mapview.html'));
} catch (e) {         
res.status(400).send(e)
}
})

---

索引.js

const express = require('express');
require('./db/mongoose'); 
const bodyParser = require('body-parser');
const userRouter = require('./routers/user');
const taskRouter = require('./routers/task');  
const app = express();
const port = process.env.PORT || 3000; 
app.use(express.json()); // Parse recieved json body  data from Postman
app.use(bodyParser.urlencoded({extended: true}));
app.use(bodyParser.json());
app.use(express.static(__dirname + '/public'));  
app.use(userRouter); 
app.use(taskRouter);   
app.listen(port, () => {
console.log('server is run on port:' + port)
});

Answer 1

当您从索引发出HTTP post请求时.html使用ajax验证用户身份验证详细信息，在成功进行身份验证后，您将发送一个静态HTML文件，该文件只是一个文本响应，不会呈现为网页(如您所期望的那样(。

为了解决这个问题，

1. 创建用于访问地图视图的单独路径.html

app.get('/map', (req, res) => {
res.sendFile(__dirname + '/public' + '/mapview.html');
});

2. 在您的 ajax 响应中，只需重定向到地图路由

$.ajax({
url: '/login',
data: $('#loginForm').serialize(), // Get email and pass from login form 
type: 'POST',
success: function (res) {                                      
console.log(res);
window.location.href = '/map';  // redirect to map route   
}   
});

Answer 2

我更新了代码，看起来像下面的代码. 正如我在过去的评论中提到的，我需要在通过 .href = '/map' 重新触发之前进行身份验证，我不知道如何将令牌附加到 .href='/map。 我们通常使用 ajax 发送令牌作为标头，如下所示： headers：{"Authorization"： localStorage.getItem('token'(}

如果我将其添加到 .href 中，类似于这个窗口.location.href = '/map + "？token=MY_TOKEN" ，我如何在身份验证方法中获取它？

---

用户.js

router.post('/login', async (req, res) => {
try {
const user = await User.findByCredentials(req.body.email, 
req.body.password)
const token = await user.generateAuthToken()        
res.send({user, token})        
} catch (e) {
res.send(e)
res.status(400).send(e)
}
})
router.get('/map', auth, (req, res) => {
const publicDir = path.join(__dirname, '../public') 
res.sendFile(path.join(publicDir + '/mapview.html'));     
});

---

索引.html

$('div[name="logIn"]').click( () => {                  
$.ajax({
url: '/login',
data: $('#loginForm').serialize(),  
type: 'POST',
success: function (res) { 
localStorage.setItem('token', res.token);    
window.location.href = '/map';     
}                       
}) 
})