html 文件在登錄后沒有出現任何錯誤

Question

我是服務器端編程的新手。 我正在嘗試在身份驗證后提供 HTML 文件（mapview.html），但它沒有出現任何錯誤。 認證過程沒有問題。 我希望當我單擊登錄按鈕時，代碼會檢查 req 數據並在驗證后彈出 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)
  }
})

---

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

Answer 1

when you are making the HTTP post request from index.html using ajax to verify user authentication details, on successful authentication you are sending a static html file which is simply a text response and will not be rendered as a web page (as you were expecting ）。

為了解決這個問題，

1. 為訪問mapview創建單獨的路由。html

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

2. 在您的 ajax 響應中，只需重定向到 map 路線

    $.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

我更新了代碼，它看起來像下面的代碼。 正如我在過去的評論中提到的，我需要在 refirect through.href = '/map' 之前進行身份驗證，我不知道如何將令牌附加到 .href='/map 。 我們通常發送令牌為 header 和 ajax 像這樣： headers:{"Authorization": localStorage.getItem('token')}

如果我將它添加到.href，像這樣的 window.location.href = '/map + "?token=MY_TOKEN"，我怎樣才能在 auth 方法中得到它？

---

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