Updating header after log in - javascript

I created a shopping website in reactjs where I have divided the app.js file in to header ,routes and footer.the router is by default redirected to welcome page.But after I login I am redirecting my page to the same welcome page.but then I am not able to update my header with user name and logout by updating the existing nav.i know it is because of the fact that the header is not getting rerendered.But can some one help me to some how make it rerender?

You shoud use redux.
Redux is a predictable state container for JavaScript apps.
It helps you write applications that behave consistently, run in
different environments (client, server, and native), and are easy to
test. On top of that, it provides a great developer experience, such
as live code editing combined with a time traveling debugger.
You can use Redux together with React, or with any other view library.
It is tiny (2kB, including dependencies).
There are many topics about redux.
there is a function called: mapStateToProps.
suppose you have a action (login,logout,addToCart,removeToCart etc.) at A component.
You want to B and C listen to your actions. for example when user do logout, you want to remove username of your header. at this here redux helps you!

Related

How to prevent unauthenticated user see my admin privileged layout in React?

This is a hypothetical question, so let's say you've got a full-stack web application and there is admin-dashboard in the front-end side.
I, as /NOT/ admin, try to access a route such as /api/admin/dashboard
In the React app, some authentication logic can be done such as if user.isAdmin allow to dashboard else navigate back to homepage
In the back-end side, let's say Node.js, you just res.send('not authorized')
So what I thought is I'm on the client side right, I can take minified js which is derived from npm build of React app, and I don't know but somehow I can revert it back to React App folder structure then there is all the util files, components, hooks and everything.
That means I can manipulate authentication logic like allow everyone to see dashboard and also manipulate the fetching logic that would be if error from fetching, instead of return 'not loaded', compeletely remove fetching logic to the backend and just see me dashboard
So, to my understanding, after some effort, maybe not data and functionality that requires me to speak to backend, i can see dashboard or even all the layout, right?
My question is, can we prevent this to happen in some way?
Or do I need to?
First, As you have use role based conditional dashboard render in frontend, When a non admin user inspect the app and figure out the admin dashboard route, when ever the person visit the page, if any api is giving 401 unauthorized status, then logout or redirect that person to actual page. For a millisecond he will able to see the page.
or
Second, Send your react routing as json from backend api. Backend is way more secure. It will send conditional role base route to react. So, no user can figure out actual route path from frontend any more. So, It is more secure.

React UniversalRouter prevent user leaving the page

I am currently using UniversalRouter for routing in a react application that contains a form and other UI elements to allow users with admin permissions to make changes to data within the app for other users to see. I would like to be able to detect when a user is about to leave the page so that I can display a warning and give the user a choice to save their changes or abandon them.
I have seen other results that seem to address this problem for React-Router, but I have yet to find any results for achieving this using UniversalRouter.
In looking back at one of the blog posts where I discovered UniversalRouter, it seems like this would be something that I would need to implement by communicating with redux (i.e. by subscribing to state changes) rather than through the router directly.
I'll keep looking into this and self-answer if I get something working, but I would be very interested to know if anyone else has already implemented this 'warn the user about unsaved changes when they're about to leave the page' functionality in an app that uses UniversalRouter.

Organizing and keeping your flows and resources and sags clean with redux

Good day,
I'm in the process of implementing my first large scale react + redux + react saga app which I intend to scale massively and still have a lot of open questions. As I understand it things work the following way
Reducers -> mutate state tree
Actions -> trigger state changes
Store -> single source of truth
Redux Saga -> side effects
I also use connected react router to try and keep things purer and dispatch route changes through my store.
I try and keep a reducer per microservice resource in my application since I have many microservices I interact with for example.
User Info (which I use on basic info etc.)
User ( for login, sign up)
Communication Preferences
Investments
UI (for alerts and messaging)
Routing (managed by connected router)
In the beginning this worked really well, but I started getting a little confused on some things.
Where do I 'chain' my side effects together?
So if for example a call to login fails and I raise an alert do I dispatch an action inside my saga for login?
And if I need to dispatch for example default signup for communication preferences do I do that in the saga and have one action?
What if this particular screen doesn't want to show an alert on failure? Would I pass an onError function into my action to be handled by my saga?
(currently a business requirement to ignore a specific failure on the login screen)
Where do I handle my routing?
When login succeeds I can easily dispatch a push event to route from my saga, but this seems unpure, and I'd like to handle this elsewhere, would I then add a change to state? this seems messy.
Handling return sessions
Currently in my app I have a Token stored in localstorage. When the user hard refreshes the page I have a component at the top of my app which logs the user back in by dispatching an action.
However, is this async? will the children still render while that action is firing? my concern is I have a route checking a state value (isLoggedIn) as a child. This would then possibly cause a race condition on rendering.
Apologies for the multipart question, but the application from theory to practice for Redux apps is quite a big jump for me.
I really appreciate the reading of the question.

Recommended approach to deep linking using redux and react-router

I am building a web app using React (15.3.0), Redux (3.5.2) and react-router (2.6.1). I include the versions as I've seen a few related posts but they reference old versions of these libraries.
I have some state that I would like to persist on the URL so that the user can deep link to it. By deep linking, I mean that a user can link directly to a state of a page. I have various pages in my app, each page has a separate reducer, the state for each page should persist between pages.
I've read Dan Abramov's recommended approach: How to sync Redux state and url hash tag params
Which seems ok, apart from persisting state between pages.
An example scenario:
User lands on page one: /page1
User interacts with the page causing state to be saved in the URL: /page1?state={...}
User goes to page 2: /page2
User interacts with page 2: /page2?state={...}
User links to page 1, expecting to see that page as they left it. Problem! How do we recover the state from page 1?
I've looked at react-router-redux, but I can't tell if it does what I need it to?
Is there a common approach to this problem? If so what is it? If not, can you suggest an approach?
I'm sure there is more than one answer to this; you just need to pick one and implement it.
If it were me, I would do this:
Use the redux store as the single source of truth for state
Subscribe to the store in some way (perhaps a redux middleware) and update the url params when the relevant state for page1 changes
If a user visits /page1, use the stored state (I'm assuming state will need to be synced to a server to be able to store/recover it).
If a user visits /page1?state={...}, either a) merge the URL state into the stored/recovered state or b) skip recovering and use the URL directly.
I would even go further and NOT sync the state to the url, since that seems like wasted effort (unless users are relying on bookmarking a page). Just render a React component saying "Share this URL" and have it render a URL with proper query params.

React + Redux - Render app based on access level

So I have built an API and now i am building a react app to go with it. The app will have different access level e.g user and admin. The problem i have at the moment is that The whole react app is rendered and sent to the client. So even though the routes are protected on the server. A user could potentially access the admin intended JavaScript on the client.
I'm trying to figure out how i can have a user log in and from that decide what to JavaScript to serve. After 2 days looking into this I am still stuck. A lot of articles seem to suggest making the App isomorphic (render the JS server side) but is there no other way of doing this. The solution we are leaning towards at the moment is having different builds. A build that just contains the JavaScript for the login. Then after auth we use that to decide if to load the user build or the admin build. This is going to mean repetition and i dont really like this method.. but its the only way i can think of at the moment.
My question is.. what is the best way to handle this in react? Also can react load components on the fly? so we could have the app just contain the login JavaScript and when Auth passes we send details on what components the user should have access to and then just load theses

Categories