1

我有一个登录注册页面。在注册部分，用户可以注册并且应该进行身份验证并获得存储在本地存储中的令牌。在该用户将被重定向到带有令牌的个人资料页面之后，但在重定向之前，因为个人资料页面受到保护。应验证令牌。

如果经过验证，它应该呈现个人资料页面，但它没有呈现，我不知道为什么。这甚至吐出任何错误。但这是奇怪的部分：当我创建一个用户帐户时，我记录了 JWT 令牌并复制它，通过 Postman 使用它，将令牌附加到标题上，然后使用它将呈现 HTML 的配置文件路由。但在 Chrome 上，它没有。

这是我制作的视频：https ://www.youtube.com/watch?v=ufkor1eVxx8

这是注册时的代码。（我会重构一切）。

'use strict';

    (function () {
    
        const signInForm = document.getElementById('signup-form');
        const username = document.getElementById('signup-username');
        const email = document.getElementById('signup-email');
        const password = document.getElementById('signup-password');
        const signUpBtn = document.getElementById('signup-btn');
    
        signUpBtn.addEventListener('click', (e) => {
            e.preventDefault();
    
            axios({
                method: 'post',
                url: '/signup',
                data: {
                    username: username.value,
                    email: email.value,
                    password: password.value
                }
            })
                .then(response => {
                    console.log(response.data) //check my response working
                    
                    const token = response.data;
    
                    if(token) {
                        window.localStorage.setItem('access_token', token);
                        // window.location.assign('/profile');
                        axios({
                            method: 'get',
                            url: '/profile',
                            headers: {
                                'Authorization': `Bearer ${token}`,
                            }
                        }).then( res => {
                            console.log(res, 'afsdfas')
                            if(res.status === 200) {
                                console.log(res.data.decoded) // decoded JWT working
                            }
                        })
                        .catch( err => {throw err});
    
                    } else {
                        console.log('NO TOKEN');
                    }
    
                })
                .catch(err => { throw err });
        })
     }());

这是路由配置文件的代码：

const express = require('express');
const router = express.Router();
const verifyToken = require('../helper.fn/verifyToken');
const jawt = require('../helper.fn/jwt.token');

router.get('/profile', verifyToken, (req, res) => {

    // console.log(req.token, 'test'); // token verified here. working.

    jawt.checkJWT(req.token)
    .then( userDecode => {
        console.log(userDecode); // user decoded info working

        if(userDecode) {
            console.log(userDecode, 'decode') // ! this will run working
            res.render('userprofile'); // ! THIS IS THE PROBLEM WON'T RENDER
            console.log('gasdfas'); // ! this will run
           // res.json({userDecode}); this for testing this works
        } else {
            res.json({ err: 'something is wrong'})
        }
        
    })
    .catch( err => { throw err})

});


module.exports = router;

这是验证令牌的代码：

/**
 * this function checks if we a token attached to a header
 * @param {Object} req
 * @param {Object} res
 * @param {function} next
 */
module.exports = function(req, res, next) {
  const userToken = req.headers.authorization;

   console.log(userToken) // logs the bearer and token
  if (!userToken) {
    res.status(403).json({
      error: "FORBIDDEN"
  });
  } else {
    const token = userToken.split(' ')
    console.log(token[1]) // I have the token here working
    req.token = token[1];
    next();
  }

};
4

0 回答 0