Styjun

In horse breeding, what is the female equivalent of putting a horse out "to stud"?

Why did all the guest students take carriages to the Yule Ball?

University's motivation for having tenure-track positions

Didn't get enough time to take a Coding Test - what to do now?

Difference between "generating set" and free product?

Semisimplicity of the category of coherent sheaves?

Am I ethically obligated to go into work on an off day if the reason is sudden?

Scientific Reports - Significant Figures

Empty set is subset of every set? If yes, why that...

How do you keep chess fun when your opponent constantly beats you?

system() function string length limit

How should I replace vector<uint8_t>::const_iterator in an API?

Install many applications using one command

Are spiders unable to hurt humans, especially very small spiders?

Finding the path in a graph from A to B then back to A with a minimum of shared edges

What's the point in a preamp?

Segmentation fault output is suppressed when piping stdin into a function. Why?

Is this wall load bearing? Blueprints and photos attached

Is above average number of years spent on PhD considered a red flag in future academia or industry positions?

What are these Gizmos at Izaña Atmospheric Research Center in Spain?

Would an alien lifeform be able to achieve space travel if lacking in vision?

What can I do if neighbor is blocking my solar panels intentionally?

Windows 10: How to Lock (not sleep) laptop on lid close?

Hopping to infinity along a string of digits

React Building a CMS with dashboard how to show hide Dashboard component

.everyoneloves__top-leaderboard:empty,.everyoneloves__mid-leaderboard:empty,.everyoneloves__bot-mid-leaderboard:empty height:90px;width:728px;box-sizing:border-box;

0

i built a react app (simple CMS) with couple components, most components are available for visitors, in the main(App.js) component.
i use react router to display components,
i made Dashboard component available only for admins, thru example.com/dashboard.
i built a login system using node.js and JWT i did all the logic.
but i dont know the proper way to show hide the dashboard component.
i tried to use
but i cant understand the logic, please show me what the best strategy to show hide the dashboard in the react app.
is it safe to use if else logic showing/hiding Dashboard. or its not secure to use that?
My question: is there a react way to do the job

exapmle:

my-app/
 README.md
 node_modules/
 package.json
 public/
 index.html
 favicon.ico
 src/
 |components/
 |Clien/
 |Home.js
 |Home.css
 |Header.js
 |Footer.js
 |Login.js
 |admin/
 |Dashboard.js
 |Dashboard.css
 App.css
 App.js
 index.css
 index.js
 logo.svg

javascript reactjs

share|improve this question

edited Mar 22 at 7:08

DzHistory

asked Mar 22 at 6:35

DzHistory DzHistory

12

add a comment | 

0

i built a react app (simple CMS) with couple components, most components are available for visitors, in the main(App.js) component.
i use react router to display components,
i made Dashboard component available only for admins, thru example.com/dashboard.
i built a login system using node.js and JWT i did all the logic.
but i dont know the proper way to show hide the dashboard component.
i tried to use
but i cant understand the logic, please show me what the best strategy to show hide the dashboard in the react app.
is it safe to use if else logic showing/hiding Dashboard. or its not secure to use that?
My question: is there a react way to do the job

exapmle:

my-app/
 README.md
 node_modules/
 package.json
 public/
 index.html
 favicon.ico
 src/
 |components/
 |Clien/
 |Home.js
 |Home.css
 |Header.js
 |Footer.js
 |Login.js
 |admin/
 |Dashboard.js
 |Dashboard.css
 App.css
 App.js
 index.css
 index.js
 logo.svg

javascript reactjs

share|improve this question

edited Mar 22 at 7:08

DzHistory

asked Mar 22 at 6:35

DzHistory DzHistory

12

add a comment | 

i built a react app (simple CMS) with couple components, most components are available for visitors, in the main(App.js) component.
i use react router to display components,
i made Dashboard component available only for admins, thru example.com/dashboard.
i built a login system using node.js and JWT i did all the logic.
but i dont know the proper way to show hide the dashboard component.
i tried to use
but i cant understand the logic, please show me what the best strategy to show hide the dashboard in the react app.
is it safe to use if else logic showing/hiding Dashboard. or its not secure to use that?
My question: is there a react way to do the job

exapmle:

my-app/
 README.md
 node_modules/
 package.json
 public/
 index.html
 favicon.ico
 src/
 |components/
 |Clien/
 |Home.js
 |Home.css
 |Header.js
 |Footer.js
 |Login.js
 |admin/
 |Dashboard.js
 |Dashboard.css
 App.css
 App.js
 index.css
 index.js
 logo.svg

javascript reactjs

share|improve this question

edited Mar 22 at 7:08

DzHistory

asked Mar 22 at 6:35

DzHistory DzHistory

12

my-app/
 README.md
 node_modules/
 package.json
 public/
 index.html
 favicon.ico
 src/
 |components/
 |Clien/
 |Home.js
 |Home.css
 |Header.js
 |Footer.js
 |Login.js
 |admin/
 |Dashboard.js
 |Dashboard.css
 App.css
 App.js
 index.css
 index.js
 logo.svg

share|improve this question

edited Mar 22 at 7:08

DzHistory

asked Mar 22 at 6:35

DzHistory DzHistory

12

share|improve this question

edited Mar 22 at 7:08

DzHistory

asked Mar 22 at 6:35

DzHistory DzHistory

12

asked Mar 22 at 6:35

DzHistory DzHistory

12

asked Mar 22 at 6:35

DzHistory DzHistory

12

1 Answer
1

active

oldest

votes

0

You need to keep track of whether or not your user is logged in through some global state, or localStorage. Then you can do something like this:

<Route render=(props) => (
 state.isAuthenticated === true
 ? <Component ...props />
 : <Redirect to='/login' />
) />

Keep in mind that a malicious use could just go open up devtools and change isAuthenticated to true, so whatever content you are serving in the dashboard also needs to be protected by authentication.

share|improve this answer

answered Mar 22 at 6:49

miyumiyu

2347

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the answer thats what im afraid of malicious use can you provide a link for a proper way to create private routing, thank you
  
  – DzHistory
  Mar 22 at 8:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  there really isn't any way to perfectly protect a client-side route since the user has access to your component code. The best you can do is make sure the data you are showing on your dashboard is served from your api/server only if the user's JWT is valid (which it looks like you already have that in place)
  
  – miyu
  Mar 22 at 18:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you that make sense, so their is no way we can hid the dashboard from malicious use, my only choice is to depend on JWT
  
  – DzHistory
  Mar 23 at 19:53
  

  
  
  
  

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);



);

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function ()
StackExchange.helpers.onClickDraftSave('#login-link');
);

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f55294111%2freact-building-a-cms-with-dashboard-how-to-show-hide-dashboard-component%23new-answer', 'question_page');

);

Post as a guest

Name

Email

Required, but never shown

0

You need to keep track of whether or not your user is logged in through some global state, or localStorage. Then you can do something like this:

<Route render=(props) => (
 state.isAuthenticated === true
 ? <Component ...props />
 : <Redirect to='/login' />
) />

Keep in mind that a malicious use could just go open up devtools and change isAuthenticated to true, so whatever content you are serving in the dashboard also needs to be protected by authentication.

share|improve this answer

answered Mar 22 at 6:49

miyumiyu

2347

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the answer thats what im afraid of malicious use can you provide a link for a proper way to create private routing, thank you
  
  – DzHistory
  Mar 22 at 8:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  there really isn't any way to perfectly protect a client-side route since the user has access to your component code. The best you can do is make sure the data you are showing on your dashboard is served from your api/server only if the user's JWT is valid (which it looks like you already have that in place)
  
  – miyu
  Mar 22 at 18:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you that make sense, so their is no way we can hid the dashboard from malicious use, my only choice is to depend on JWT
  
  – DzHistory
  Mar 23 at 19:53
  

  
  
  
  

add a comment | 

0

You need to keep track of whether or not your user is logged in through some global state, or localStorage. Then you can do something like this:

<Route render=(props) => (
 state.isAuthenticated === true
 ? <Component ...props />
 : <Redirect to='/login' />
) />

Keep in mind that a malicious use could just go open up devtools and change isAuthenticated to true, so whatever content you are serving in the dashboard also needs to be protected by authentication.

share|improve this answer

answered Mar 22 at 6:49

miyumiyu

2347

• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thanks for the answer thats what im afraid of malicious use can you provide a link for a proper way to create private routing, thank you
  
  – DzHistory
  Mar 22 at 8:31
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  there really isn't any way to perfectly protect a client-side route since the user has access to your component code. The best you can do is make sure the data you are showing on your dashboard is served from your api/server only if the user's JWT is valid (which it looks like you already have that in place)
  
  – miyu
  Mar 22 at 18:43
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  
  thank you that make sense, so their is no way we can hid the dashboard from malicious use, my only choice is to depend on JWT
  
  – DzHistory
  Mar 23 at 19:53
  

  
  
  
  

add a comment | 

You need to keep track of whether or not your user is logged in through some global state, or localStorage. Then you can do something like this:

<Route render=(props) => (
 state.isAuthenticated === true
 ? <Component ...props />
 : <Redirect to='/login' />
) />

Keep in mind that a malicious use could just go open up devtools and change isAuthenticated to true, so whatever content you are serving in the dashboard also needs to be protected by authentication.

share|improve this answer

answered Mar 22 at 6:49

miyumiyu

2347

<Route render=(props) => (
 state.isAuthenticated === true
 ? <Component ...props />
 : <Redirect to='/login' />
) />

share|improve this answer

answered Mar 22 at 6:49

miyumiyu

2347

answered Mar 22 at 6:49

miyumiyu

2347

answered Mar 22 at 6:49

miyumiyu

2347