Question

我有简单的节点身份验证应用程序。我想做的是在标头中发送令牌，并重定向到url。例如，用户单击个人资料，它将使用令牌重定向他，以便他可以访问该页面。

我正在尝试我发现的东西，但这使我无法理解的事情变得奇怪。单击URL后，它发出2个请求。而且只有第一个带有jwt承载令牌标头。重定向的第二个没有。我添加了图像以更好地理解。 Here is the image

这是我的layout.handlebars

的代码

<!DOCTYPE html>
<html>

<head>
    <title>LoginApp</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO"
        crossorigin="anonymous">

    <link rel="stylesheet" href="/css/style.css" />
</head>

<body>
    <div class="container">
        <div class="header clearfix">
            <nav>
                <ul class="nav nav-pills pull-right">
                   // HERE I CLICK ON PROFILE
                    <li role="presentation"><a onclick="submitForm()">Profil</a></li>
                    <li role="presentation"><a href="/users/register">Register</a></li>
                </ul>
            </nav>
            <h3 class="text-muted">LoginApp</h3>
        </div>
    </div>

    <footer class="footer">
        <p>&copy; 2015 LoginApp, Inc.</p>
    </footer>

    </div> <!-- /container -->
    <script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
    <script>
        function submitForm() {
            var data = {};//Your JSON Data
            console.log("ok");
            var headers = {
                "Contect-Type": "application/json",
                "Authorization": "Bearer " + token
            };
            $.ajax({
                url: 'http://localhost:3000/users/profile',
                type: 'GET',//'GET','PUT','DELETE'
                headers: headers,
                data: data,
                success: function (result) {
                    alert("success");
                },
                error: function (error) {
                    alert('error ', error);
                }

            });
            window.location = "http://localhost:3000/users/profile";
        }

    </script>
</body>

</html>

还有我的route.js的一部分

// Login view
router.get("/login", function (req, res) {
  res.render("login");
});

// Login
router.post("/login", (req, res, next) => {
  const username = req.body.username;
  const password = req.body.password;

  User.getUserByUsername(username, (err, user) => {
    if (err) throw err;
    if (!user) {
      return res.json({
        success: false,
        msg: "User not found"
      });
    }

    User.comparePassword(password, user.password, (err, isMatch) => {
      if (err) throw err;
      if (isMatch) {
        const token = jwt.sign({
            data: user
          },
          config.secret, {
            expiresIn: 604800 // 1 week
          }
        );

        res.render("index", {
          token: token
        });

      } else {
        return res.json({
          success: false,
          msg: "Wrong password"
        });
      }
    });
  });
});

// Profile
router.get(
  "/profile",
  passport.authenticate("jwt", {
    session: false
  }),
  (req, res, next) => {
    res.json({
      user: req.user
    });
  }
);

module.exports = router;

Answer 1

您不能使用自定义标题进行重定向。尝试使用本地存储，cookie，GET或POST变量，具体取决于您的后端实现。以下是在本地存储中存储令牌的示例：

// Container for the frontend functions
app = {};

app.config = {
    'sessionToken': false
};

// Set the session token in the app.config object as well as localstorage
app.setSessionToken = function(token) {
    app.config.sessionToken = token;
    var tokenString = JSON.stringify(token);
    localStorage.setItem('token', tokenString);
};

// Get the session token from localstorage and set it in the app.config object
app.getSessionToken = function() {
    var tokenString = localStorage.getItem('token');
    if(typeof(tokenString) == 'string') {
        try {
            var token = JSON.parse(tokenString);
            app.config.sessionToken = token;
        } catch(e) {
            app.config.sessionToken = false;
        }
    }
};

// Get the token from the local after the window loads
window.onload = function() {
    app.getSessionToken();
};

更多信息：https://auth0.com/docs/security/store-tokens

配置Ajax标头和重定向

1 个答案: