Question

我有一条路由在/verify/:token中发布，其中:token是一个jwt，但是在我看来，表单将发布请求发送到/verify/:token，然后在路由逻辑中我得到无效的jwt因为正在发送:token，我该如何解决？

<form action="/verify/:token" method="POST">
    <div class="input-group form-group">
        <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
        <input id="passcode" type="text" class="form-control" name="passcode" placeholder="Pass Code" required>
    </div>
    <button type="submit" class="btn btn-primary" style="display: inline-block;">Verify</button>
</form>

Answer 1

假设客户端有jQuery，则必须防止在提交表单时执行默认的表单操作。然后，您必须通过获取input字段的值来发送ajax请求

$('form').submit(function(e){
    //prevent default
    e.preventDefault();

    let token = $('#passcode').val();
    let url = "/verify/" + token;
    $.post( url, function( data ) {
        // Do something once the ajax call succeeds
    }).fail(function() {
         alert( "error" );
    });
});

Answer 2

将令牌传递到表单页面路由器

router.get("/", function (req, res, next) {
jwt.sign({_id: user._id}, jwtSecret, { expiresIn: '5m' }).then((token) => {
        res.render("postForm", {
            token: token
        });
  });
});

假设您在客户端中使用ejs，现在您可以在隐藏的输入字段中使用令牌

 <form action="/verify" method="POST">
        <div class="input-group form-group">
            <span class="input-group-addon"><i class="glyphicon glyphicon-lock"></i></span>
     <input id="token" type="hidden" class="form-control" name="token" value="<%= token %> ">
            <input id="passcode" type="text" class="form-control" name="passcode" placeholder="Pass Code" required>
        </div>
        <button type="submit" class="btn btn-primary" style="display: inline-block;">Verify</button>

</form>

通过JWT发布请求

2 个答案: