So I have an app that currently works fine on login, just takes you to the basic app. I created a new page called AdminDashboard.js, and added a new part to the json called "Admin" which is set to 1 for admin users and 0 for everyone else. I don't know where to add a redirection where, if the user logging in is an admin, they will go to the AdminDashboard.js instead of the App.js part.
The JSON looks like
{
"FirstName": "",
"LastName": "",
"Email": "admin",
"ID": 12,
"Admin": 1,
"Submitted": 0,
"Token": "eyJ0e1NiJ9.eNTYzMjA0NTkEyfQ._K5qNdsqJJXCiKq3XmIjFhU"
}
And the current summarized code is similar to this for the used pages, not including AdminDashboard.js
index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
import { Route, BrowserRouter as Router } from 'react-router-dom';
// Our Components
import Login from './components/Login';
ReactDOM.render(
<Router>
<div>
<Route exact path="/" component={App} />
<Route exact path="/login" component={Login} />
</div>
</Router>
, document.getElementById('root')
);
registerServiceWorker();
App.js
import logo from './logo.svg';
import './App.css';
import AuthService from './components/AuthService';
import withAuth from './components/withAuth';
const Auth = new AuthService();
class App extends Component {
handleLogout(){
Auth.logout()
this.props.history.replace('/login');
}
render() {
return (
<div className="App">
<div className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<h2>Welcome {this.props.user.email}</h2>
</div>
<p className="App-intro">
<button type="button" className="form-submit" onClick={this.handleLogout.bind(this)}>Logout</button>
</p>
</div>
);
}
}
export default withAuth(App);
AuthService.js
export default class AuthService {
constructor(domain) {
this.domain = domain || 'http://10.123.456.321'
this.fetch = this.fetch.bind(this)
this.login = this.login.bind(this)
this.getProfile = this.getProfile.bind(this)
}
login(email, password) {
// Get a token
return this.fetch(`${this.domain}/Login/`, {
method: 'POST',
body: JSON.stringify({
email,
password
})
}).then(res => {
this.setToken(res.Token)
return Promise.resolve(res);
})
}
loggedIn() {
// Checks if there is a saved token and it's still valid
const token = this.getToken()
return !!token && !this.isTokenExpired(token) // handwaiving here
}
isTokenExpired(token) {
try {
const decoded = decode(token);
if (decoded.exp < Date.now() / 1000) {
return true;
}
else
return false;
}
catch (err) {
return false;
}
}
setToken(idToken) {
// Saves user token to localStorage
localStorage.setItem('id_token', idToken)
}
getToken() {
// Retrieves the user token from localStorage
return localStorage.getItem('id_token')
}
logout() {
// Clear user token and profile data from localStorage
localStorage.removeItem('id_token');
}
getProfile() {
return decode(this.getToken());
}
fetch(url, options) {
// performs api calls sending the required authentication headers
const headers = {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
if (this.loggedIn()) {
headers['Authorization'] = 'Bearer ' + this.getToken()
}
return fetch(url, {
headers,
...options
})
.then(this._checkStatus)
.then(response => response.json())
}
_checkStatus(response) {
// raises an error in case response status is not a success
if (response.status >= 200 && response.status < 300) {
return response
} else {
var error = new Error(response.statusText)
error.response = response
throw error
}
}
}
withAuth.js
import React, { Component } from 'react';
import AuthService from './AuthService';
export default function withAuth(AuthComponent) {
const Auth = new AuthService('http://10.123.456.321');
return class AuthWrapped extends Component {
constructor() {
super();
this.state = {
user: null
}
}
componentWillMount() {
if (!Auth.loggedIn()) {
this.props.history.replace('/login')
}
else {
try {
const profile = Auth.getProfile()
this.setState({
user: profile
})
}
catch(err){
Auth.logout()
this.props.history.replace('/login')
}
}
}
render() {
if (this.state.user) {
return (
<AuthComponent history={this.props.history} user={this.state.user} />
)
}
else {
return null
}
}
};
}
Login.js
import React, { Component } from 'react';
import './Login.css';
import AuthService from './AuthService';
class Login extends Component {
constructor(){
super();
this.handleChange = this.handleChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.Auth = new AuthService();
}
componentWillMount(){
if(this.Auth.loggedIn())
this.props.history.replace('/');
}
render() {
return (
<div className="center">
<div className="card">
<h1>Login</h1>
<form onSubmit={this.handleFormSubmit}>
<input
className="form-item"
placeholder="Username goes here..."
name="username"
type="text"
onChange={this.handleChange}
/>
<input
className="form-item"
placeholder="Password goes here..."
name="password"
type="password"
onChange={this.handleChange}
/>
<input
className="form-submit"
value="SUBMIT"
type="submit"
/>
</form>
</div>
</div>
);
}
handleFormSubmit(e){
e.preventDefault();
this.Auth.login(this.state.username,this.state.password)
.then(res =>{
this.props.history.replace('/');
})
.catch(err =>{
alert(err);
})
}
handleChange(e){
this.setState(
{
[e.target.name]: e.target.value
}
)
}
}
export default Login;
you should follow the way of React role-based access control and after login success you can check if the user is admin then you have to add route for the component AdminDashboard.js otherwise route to '/'.
you can look for an example I made: https://github.com/NemerSahli/React-Role-Based-Access-Control