MERN-stack使用react-router用户身份验证而不使用redux

时间:2018-02-28 08:08:25

标签: node.js reactjs authentication react-router

我目前正在尝试为我的应用程序实现一些身份验证,但是,我有一个简单的问题。 我在后端设置了一些基本身份验证,它设置一个令牌并将其发送到前端,并将其保存在cookie中。 我读到,只要我正在拨打api电话,令牌就会被发送到服务器,但我很难理解我应该怎么做。

我刚读过这个question on stackoverflow,似乎回答这个问题的人只是建议两个辅助函数来检查是否有一个名为token的项目。 这对我来说似乎有点安全隐患。难道没有人能设置一个名为token的项目本地存储中的任何随机值吗?这样,这个人可以进入受保护的路线吗? 如果是这样,您如何确保JWT实际上已经过身份验证?

所以,为了打破它,我的问题是:

  1. 上面的答案是否暗示了安全风险?
  2. 您如何向您的api电话发送JWT以及如何验证?

1 个答案:

答案 0 :(得分:1)

  
      
  1. 上面的答案是否暗示了安全风险?
  2.   

如果使用随机令牌,您的api应该返回401错误,因此您可以通过清除cookie /本地存储中的令牌值来处理此401错误。

编辑:为防止用户使用自输入令牌值访问私有路由,您可能需要发出api请求以检查私有路由的auth功能中的令牌(这是可选的因为假的用户无论如何都无法获取api,顺便说一下,客户端可以访问javascript应用程序代码,这样他总能“读取”受限制的页面,除非你做SSR,这就是为什么你的敏感数据必须是服务器端的)

  
      
  1. 您如何向您的api电话发送JWT以及如何验证?
  2.   

取决于您的服务器端实施,即jsonwebtokenpassportpassport-jwt效果很好。

在客户端,您将使用前缀AuthorizationJWT(取决于护照配置)在每个请求的Bearer标头中发送您的jwt。

使用fetch的示例:

fetch('/api', {
    headers: {
        'Authorization': 'Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ...'
    }
});