如何在React应用程序中传递授权令牌

时间:2018-06-27 13:05:51

标签: javascript reactjs

我正在使用NodeJs作为后端的Web应用程序的react部分。登录操作后,我无法通过授权。当用户登录时,将生成一个令牌,我将使用此令牌并将其保存在本地存储中。然后,我使用它通过以下代码控制网站上的用户:

    const PrivateRoute = ({component: Component, ...rest}) =>(
      <Route {...rest} render={(props) => (
        window.localStorage.token !== undefined
         ? <Component {...props} />
         : <Redirect to="/" />
    )} />

现在这很好用,但是当我尝试向服务器发出发布请求时,出现以下错误:

  { type: "ValidationError", details: "Authorization token not passed"}
   details: "Authorization token not passed" type:"ValidationError"

我已经进行了一些谷歌搜索,并且我认为发生错误是因为我没有为应用程序设置标题对象。我可能是错的。

请提供有关如何解决此问题的帮助,我们将感激不尽。谢谢

1 个答案:

答案 0 :(得分:2)

axios与fetch一样,可以接受带有config的第二个参数,其中一部分可以是auth令牌,因此,您可以传递如下内容:

axios.get(url, {
  headers: {
    authorization: `Bearer ${auth_token}`
    other_header1: 'value',
    other_header2: 'value2'
  }
}

或者,获取令牌后,可以将其设置为默认值,然后在axios docs中查找“ config defaults”。