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

Question

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

我的应用程序.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>

Answer 1

首先，我建议您至少使用一个小型框架来简化您的工作，例如 react、svelte ... 否则您可以使用 jQuery 来做到这一点。

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

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

localStorage.setItem('token', yourTokenresponseFromExpress);

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

问题描述

1 个解决方案

解决方案1
1 已采纳 2020-07-17 13:49:19

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

问题描述

1 个解决方案

解决方案1 1 已采纳 2020-07-17 13:49:19

解决方案1
1 已采纳 2020-07-17 13:49:19