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

Я новичок в серверном программировании. Я пытаюсь передать файл HTML (mapview.html) после аутентификации, но он не появляется без ошибок. нет проблем с процессом аутентификации. Я ожидаю, что когда я нажимаю кнопку входа в систему, коды проверяют данные запроса и после проверки появляется всплывающее окно 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)                       
           }   
      })

  })

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

person ehsanpaknahad    schedule 19.06.2020    source источник


Ответы (2)


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

Для решения этой проблемы,

  1. Создайте отдельный маршрут для доступа к mapview.html
    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   
        }   
    });
person arnabmaji19    schedule 19.06.2020
comment
проблема в том, что app.get('/map', (req, res) легко доступен, и он должен иметь аутентификацию, поэтому я изменил его на router.get('/map', auth, (req, res). но мне нужно каким-то образом прикрепите токен к window.location.heref='/map'. токен уже отправлен обратно в локальное хранилище, и я могу легко его получить, но я не знаю, как прикрепить его к .href='/map' - person ehsanpaknahad; 20.06.2020
comment
Невозможно прикрепить токен авторизации в window.location.href. Но вы можете использовать сеансы для достижения этой цели. - person arnabmaji19; 20.06.2020

Я обновил коды, и он выглядит следующим образом. Как я упоминал в предыдущем комментарии, мне нужно пройти аутентификацию перед повторным вызовом через .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';     
               }                       
            }) 
        })
person ehsanpaknahad    schedule 20.06.2020
comment
проблема решена.. для тех, кто может столкнуться с этой проблемой, я мог получить токен через req._parsedOriginalUrl.query.. и это сработало... - person ehsanpaknahad; 20.06.2020