Logging out on page refresh in React + Redux Application, but if I store token in localstorage, then it works fine, but i don't want to store token in localstorage. Is there any other way to achieve it?
Related
My app makes a get request when the user navigates to a profile page, and there are params in the url to request the data. Should this data be stored in Redux, or is it better to make the request within the component and save it in React state? I am generally not persisting the data anywhere else in the app once a user has viewed the page.
I am using Redux store to save the stage of my page in React js but after a refresh of the page the stored data are set again to null as default. There is a way to Redux store data are stored until user press logout button on the page.
Do you know how to save the state and after a page refresh it will not disappear ? Or there is a tutorial that I can see or read ?
this is because redux maintains state until you refresh the page. To solve this problem you need to either write your data to localstorage or use react-router-dom
in last case state on save in your app not use localstorage.
warning. react - it SPA based framefork. please, use react-router-dom!
https://reactrouter.com/web/guides/quick-start
I'm using ReactJS for my next project and am using JWT and storing it in LocalStorage for persistent login. The issue occurs whenever I refresh my website, the navbar flickers between auth links and guest links. Can anyone help with the flickering/flashing between states while using persistent login?
I've been with this issue for days and I cant seem to figure out, Google also doesnt help.
I log in, I get JWT token from the API response, add the token to my localstorage and my plan is to then redirect to the dashboard. How would I go on about adding the token to header? I cant seem to figure out. When I push the dashboard route to history, the page doesnt get reloaded it simply renders the dashboard. The dashboard route is protected in my backend and it verifies if the token is valid from the header, if so then it lets on the route. but if I push to history then it completely ignores the backend. I tried doing like window.location.reload(), then it reloads but I cant figure out how to add the token to header from localstorage.
Thanks
If you're in a single page app, like a React app with React router, navigating between routes do not trigger a page reload or server request.
With your JWT on your client, you should then be able to access it and attach it to the ajax requests made by your React app.
Somewhere in your app, you would make requests using fetch() or similar, where you can configure the Authorization: Bearer XXXXX header.
I have only started with react and redux and designed the login -sign up page.
Have an action that calls login-sign up API and a corresponding reducer.
I display some of this information on page and use it on some others. Now, I would like this state to be maintained when the browser is reloaded. How do I do it?
I have this header component binding this action that logs the user in.
Usually, you either store the state in localStorage, e.g. by using redux-persist or fetch the initial state from your server.