Nodejs + reactjs + jwt 检查

Posted

技术标签:

【中文标题】Nodejs + reactjs + jwt 检查【英文标题】:Nodejs + reactjs + jwt check 【发布时间】:2020-07-28 18:52:57 【问题描述】:

首先,对不起我的英语...... 我正在尝试学习如何在 Reactjs 中构建 JWT 登录和私有路由器...我在 nodeJS 中创建简单的后端系统(注册用户、列表、创建 JWT 令牌并检查 jwt),它工作正常(我认为).. . 问题在于反应,当在 API verifyToken(在文件 IsAuthenticated 中)请求 GET 时,它返回 true 或 false,理论上它的工作(第一张图片)......所以当我导出这个文件并在 Routes.js 中导入这不返回真或假,如图 2 所示,它返回一个承诺 我该如何解决这个问题?

再次,对不起我的英语并感谢您可能的帮助 image 1 image 2

【问题讨论】:

【参考方案1】:

这是预期的行为。 async 函数返回 Promise。来自MDN:

异步函数声明定义了一个异步函数——a 作为 AsyncFunction 对象的函数。异步函数 通过事件以与其余代码不同的顺序运行 循环,返回一个隐式 Promise 作为其结果

您必须记住,一旦您执行了任何异步操作,您就无法返回在同一流程中仅执行同步操作。

您应该在 useEffect 挂钩中使用您的 isAuthenticated() 函数,这将改变状态。

你可以这样使用函数:

useEffect(() =>  
    isAuthenticated().then(auth=> /*... set the setters hooks or setState ..*/)
);

【讨论】:

我不知道如何使用这个,我是新手,可以解释一下 你能写一个例子吗?【参考方案2】:

这是正常的,因为异步函数返回Promise。

async function f() 
  return 1;


f().then(res => console.log(res)); // 1

你可以这样做来获得你的价值

【讨论】:

它工作了,但现在的问题是Routes.js每次去/home时都需要调用isAuthenticated.js,但我不知道如何 我认为您需要在 app.js 中添加一个类似 isLoggedIn 的状态,然后您必须将作为道具发送到您需要检查用户是否已登录的所有组件。【参考方案3】:

将此添加到您的 Routes.js const isAuth = await isAuthenticated();,然后使用 isAuth 而不是 isAuthenticated。

【讨论】:

【参考方案4】:

您需要使用“等待”或回调承诺,而不是两者:

try 
    const response = await axios.get('/myRequest');
    console.log(response);
   catch (error) 
    console.error(error);
  

或者像这样:

axios.get('/myRequest')
  .then(function (response) 
    // handle success
    console.log(response);
  )
  .catch(function (error) 
    // handle error
    console.log(error);
  )

【讨论】:

它也返回了一个承诺

以上是关于Nodejs + reactjs + jwt 检查的主要内容,如果未能解决你的问题,请参考以下文章

JWT - 刷新令牌和安全改进

nodeJS中的JWT管理员角色检查

Reactjs - 来自 JWT 令牌的当前用户

如何验证nodejs中的jwt令牌/永不过期?

验证授权和未授权用户 (JWT ReactJS-Laravel)

前面读取来自nodejs的cookie(Reactjs)