html 没有任何错误记录后文件没有出现

html file does not appear after logging without any error

我是服务器端编程的新手。 我正在尝试在身份验证后提供 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

index.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)                       
           }   
      })

  })

user.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)
  }
})

index.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)
 });

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

为了解决这个问题,

  1. 为访问 mapview.html
  2. 创建一个单独的路由
    app.get('/map', (req, res) => {
        res.sendFile(__dirname + '/public' + '/mapview.html');
    });
  1. 在您的 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   
        }   
    });

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

如果我将它添加到 .href 中,像这样 window.location.href = '/map + "?token=MY_TOKEN" ,我怎样才能在 auth 方法中得到它?


user.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'));     
 });

index.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';     
               }                       
            }) 
        })