如何将 HTML 页面与 JWT Node JS Auth 集成？答案

【问题标题】：How do you integrate HTML page with JWT Node JS Auth?如何将 HTML 页面与 JWT Node JS Auth 集成？
【发布时间】：2020-11-07 02:36:18
【问题描述】：

我创建了一个 node.js 应用程序并成功定义了一个带令牌的受保护路由。我可以通过 POSTMAN 运行它。我试图了解如何将其集成到 HTML 页面中并登录并调用受保护的路由以显示在 HTML 页面上，而不是使用 POSTMAN。我正在创建一个 html 网站并希望用户登录，然后他们可以访问页面中的某些链接。

我的 app.js

app.post('/api/posts', verifyToken, (req, res) => {  
jwt.verify(req.token, secretKey, (err, authData) => {
  if(err) {
    res.sendStatus(403);
  } else {
    res.json({
      message: 'Post created...',
      authData : authData,
      
    });
    
  }
});

});

app.post('/api/login', (req, res) => { // 模拟用户

var email=req.body.email;
var password=req.body.password;

const userdata = {
   
 email: email,
 password: password
}

console.log(userdata);
jwt.sign({userdata}, secretKey, (err, token) => {
  res.json({
    token
  });
});

});

我的 HTML

<html>
<head>

</head>
<body>
    <div>
        <h1>Portal API Test site</h1> 
        
        <form action="/api/posts", method="POST">
            <h2>Getting from Header</h2>
            <input type="submit" value="Submit", >
        </form>
    </div>
</body>

【问题讨论】：

你需要一个本地服务器来让你的静态 HTML 能够做到这一点

标签： javascript html node.js jwt

【解决方案1】：

首先，我建议你至少使用一个小框架来让你的工作更轻松，比如 react、svelte ... 否则你可以用 jQuery 来做。

要登录用户，您需要将 JWT 保存在 cookie 或 localStorage 中。这不是一项非常困难的任务，但请记住使用 Bearer Token 在受保护路由上设置每个请求的标头

你可以按照这个例子：https://github.com/chaofz/jquery-jwt-auth/blob/master/index.html

localStorage.setItem('token', yourTokenresponseFromExpress);

【讨论】：