html файл не появляется после регистрации без ошибок

Question

Я новичок в программировании на стороне сервера. Я пытаюсь обслужить файл HTML (mapview. html) после аутентификации, но он не отображается без ошибок . нет проблем с процессом аутентификации. Я ожидаю, что когда я нажимаю кнопку входа в систему, коды проверяют данные req и после проверки mapview. html всплывает , но ничего не происходит. res.sendFile () вызывает в jquery часть, console.log (res), получите все коды html в строке консоли chrome.

---

каталог файлов:

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

  })

---

пользователь. 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

Я обновил коды, и это похоже на следующий код. Как я упоминал в прошлом комментарии, мне нужно пройти аутентификацию перед повторной переадресацией через .href = '/ map' и . Я не знаю, как прикрепить токен к .href = '/ map . мы обычно отправляем токен в виде заголовка с ajax следующим образом: headers: {"Authorization": localStorage.getItem ('token')}

на случай, если я добавлю его в .href, что-то вроде этого window.location .href = '/ map + "? token = MY_TOKEN", как я могу получить его в методе аутентификации?

---

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

Answer 2

при отправке HTTP-запроса на отправку из индекса. html с использованием ajax для проверки данных аутентификации пользователя, при успешной аутентификации вы отправляете файл stati c html, который является просто текстовым ответом и будет не отображаться как веб-страница (как и следовало ожидать).

Чтобы решить эту проблему,

1. Создайте отдельный маршрут для доступа к просмотру карты. html

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

В вашем ответе 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   
        }   
    });