I've made a request to a React page, and I need to get the headers from the request.
I call the page via the URL:
and I set headers, for example authcode=1234.
I then load the page with this route:
<Route path="dashboard" name="dashboard" component={Dashboard} onEnter={requireAuth}></Route>
is there something like this.props.header, I can call in the page constructor?
It's not possible to access page headers via client JavaScript. You can get these request headers on your server side and then pass them into index.html of your React app. For example:
//in index.html
<head>
...
<script>
window.__INITIAL_HEADERS__ = {/* page headers */};
</script>
</head>
<body>
...
</body>
Then in your app you can access the headers via window.__INITIAL_HEADERS__ variable.
You cant get current page headers without sending a http request via javascript. See this answer for more info.
Add a dummy api url on your server and hit it after your page loadn then you can get the headers.
class App extends React.Component{
//some code
componentDidMount(){
fetch(Some_API).then(response=>{
console.log(response.headers)
})
}
//some code
}
I had to solve this same issue, NOT the same request, hence won't work for diff users trying to get in (auth) at the same time.
Using Server Side scripting to mod your html OR put it "somewhere client can access" is probably the way to go. i.e. session var or some db lookup key in the initial server req with the auth info, then have client use the same key to fetch the auth. (this may open up to session hijacks... so I'm still pondering for a better solution.
http-requestgoing on. With react-router you just decide what component to show on whichroute. But there is no http-request. Correct me if I'm wrong.