Copyright Derek O'Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.
When a user logs into a system, they will usually be assigned an access level. The access level will determine what features the user can see and use on the client-side. In the "Cars" worked example, we shall implement three access levels (Guest, Normal User and Administrator). What a user sees will depend on their access level. For example, the images below shown what the DisplayAllCars component will look like for the three access levels:
We need to define a constant for each access level that we shall implement on the client-side. The access levels will be held in the file client/config/global_constants.js, as shown below:
// This file holds global constants that are visible on the Client-side
// Access level
export const ACCESS_LEVEL_GUEST = 0
export const ACCESS_LEVEL_NORMAL_USER = 1
export const ACCESS_LEVEL_ADMIN = 2
// Server
export const SERVER_HOST = `http://localhost:4000`
Any file that needs to use any of the three access levels will need to import the access level value, as shown below:
...
import {ACCESS_LEVEL_GUEST} from "./config/global_constants"
...
We can use either localStorage or sessionStorage to hold global a user's access level (or any other details that we would want to be globally available on the client-side) for a web application. Both localStorage and sessionStorage are tied to the current device. The difference between the two is sessionStorage data is deleted when the webpage's session ends (which happens when the browser tab is closed) and localStorage data is deleted when the user manually clears the browser cache or when a webpage includes code to delete localStorage data.
All values in sessionStorage are stored as strings. If you are working with numbers, you need to either turn the sessionStorage value into an in (using parseInt()) or turn the interger value into a string (using toString()).
In these notes we shall use sessionStorage. Once you understand sessionStorage, using localStorage is identical.
The code below checks if the property called accessLevel exists in sessionStorage. If it does not exist (i.e. it is "undefined"), then we create sessionStorage name and accessLevel properties.
...
import {ACCESS_LEVEL_GUEST} from "../config/global_constants"
if (typeof sessionStorage.accessLevel === "undefined")
{
sessionStorage.name = "GUEST"
sessionStorage.accessLevel = ACCESS_LEVEL_GUEST
}
...
We shall need to write client-side code to:
The wrapper component below checks that the user is logged in before displaying its wrapped component. If the user is logged in, then the wrapped component will be rendered. If the user is not logged in, then the DisplayAllCars component will be rendered.
import React from 'react'
import {Route, Redirect } from "react-router-dom"
import {ACCESS_LEVEL_GUEST} from "../config/global_constants"
const LoggedInRoute = ({component: Component, exact, path, ...rest }) =>
(
<Route
exact = {exact}
path = {path}
render = {props => sessionStorage.accessLevel > ACCESS_LEVEL_GUEST ? <Component {...props} {...rest} /> : <Redirect to="/DisplayAllCars"/> }
/>
)
export default LoggedInRoute
All Routes that require the user to be logged in should be replaced with a LoggedInRoute in the file client/src/App.js as shown below:
...
<BrowserRouter>
<Switch>
<Route exact path="/Register" component={Register} />
<Route exact path="/ResetDatabase" component={ResetDatabase} />
<Route exact path="/" component={DisplayAllCars} />
<Route exact path="/Login" component={Login} />
<LoggedInRoute exact path="/Logout" component={Logout} />
<LoggedInRoute exact path="/AddCar" component={AddCar} />
<LoggedInRoute exact path="/EditCar/:id" component={EditCar} />
<LoggedInRoute exact path="/DeleteCar/:id" component={DeleteCar} />
<Route exact path="/DisplayAllCars" component={DisplayAllCars}/>
<Route path="*" component={DisplayAllCars}/>
</Switch>
</BrowserRouter>
...
Open the password_encryption project from the previous section of these notes.Change the code so that the user's access level is used to restrict the components that the user can see on the client-side.
The LoggedInRoute wrapper component only checks if a user is logged in. It does not distinguish between a normal logged-in user and an administrator. Add an AdministratorRoute wrapper component that will only allow adminstrators to have access to the AddCar and DeleteCar components.
Within a component's render() function, we can use a conditional operator to display or hide sub-components. In the code below, if the sessionStorage.accessLevel >= ACCESS_LEVEL_ADMIN then the Delete Link component is displayed. Otherwise, nothing (null) is displayed.
render()
{
return (
...
{sessionStorage.accessLevel >= ACCESS_LEVEL_ADMIN ? <Link className="red-button" to={"/DeleteCar/" + this.props.car._id}>Delete</Link> : null}
...
)
}
Open the password_encryption project from the previous section of these notes. Change the code so that the user's access level is used to restrict the components that the user can see. The "Add New Car" and "Delete" buttons should only be visible to an administrator, the "Edit" and "Log Out" buttons should only be visible to an administrator and logged in users, and the "Log In" and "Reset Database" buttons should only be visible to users who are not logged in.
As shown in the diagram below, sessionStorage properties can be viewed and minipulated in the browser's DevTools. Therefore, any user can give themselves administrator level access rights on the client-side.
Open your browser's DevTools. If you change the accessLevel value to 2 and refresh your browser, you will have an administrator's access level.
The full project code for the "Cars" Worked Example that is described below can be downloaded fromthis link.
In this example, we use session storage to hold the user's access level on the client-side.
// This file holds global constants that are visible on the Client-side
// Access level
export const ACCESS_LEVEL_GUEST = 0
export const ACCESS_LEVEL_NORMAL_USER = 1
export const ACCESS_LEVEL_ADMIN = 2
// Server
export const SERVER_HOST = `http://localhost:4000`
We shall use a sessionStorage to hold the user's access level. In this example, we have three access levels. These three access levels need to be visible to all files on the client-side.
import React from 'react'
import {Route, Redirect } from "react-router-dom"
import {ACCESS_LEVEL_GUEST} from "../config/global_constants"
const LoggedInRoute = ({ component: Component, exact, path, ...rest }) =>
(
<Route
exact = {exact}
path = {path}
render = {props => sessionStorage.accessLevel > ACCESS_LEVEL_GUEST ? <Component {...props} {...rest} /> : <Redirect to="/DisplayAllCars"/> }
/>
)
export default LoggedInRoute
LoggedInRoute is a wrapper component that can be used on any Route component in the client/App.js file. If sessionStorage.accessLevel > ACCESS_LEVEL_GUEST then it will display the wrapped Route's component. Otherwise, it will redirect to the DisplayAllCars component.
import React, {Component} from "react"
import {BrowserRouter, Switch, Route} from "react-router-dom"
import "bootstrap/dist/css/bootstrap.css"
import "./css/App.css"
import Register from "./components/Register"
import ResetDatabase from "./components/ResetDatabase"
import Login from "./components/Login"
import Logout from "./components/Logout"
import AddCar from "./components/AddCar"
import EditCar from "./components/EditCar"
import DeleteCar from "./components/DeleteCar"
import DisplayAllCars from "./components/DisplayAllCars"
import LoggedInRoute from "./components/LoggedInRoute"
import {ACCESS_LEVEL_GUEST} from "./config/global_constants"
if (typeof sessionStorage.accessLevel === "undefined")
{
sessionStorage.name = "GUEST"
sessionStorage.accessLevel = ACCESS_LEVEL_GUEST
}
export default class App extends Component
{
render()
{
return (
<BrowserRouter>
<Switch>
<Route exact path="/Register" component={Register} />
<Route exact path="/ResetDatabase" component={ResetDatabase} />
<Route exact path="/" component={DisplayAllCars} />
<Route exact path="/Login" component={Login} />
<LoggedInRoute exact path="/Logout" component={Logout} />
<LoggedInRoute exact path="/AddCar" component={AddCar} />
<LoggedInRoute exact path="/EditCar/:id" component={EditCar} />
<LoggedInRoute exact path="/DeleteCar/:id" component={DeleteCar} />
<Route exact path="/DisplayAllCars" component={DisplayAllCars}/>
<Route path="*" component={DisplayAllCars}/>
</Switch>
</BrowserRouter>
)
}
}
Each file that uses any of the access levels will need to import that access level from the client/config/global_constants.js file.
import {ACCESS_LEVEL_GUEST} from "./config/global_constants"
If a session is not currently defined, then create one.
In this example, we are holding sessionStorage variables called isLoggedIn, name and accessLevel.
The accessLevel is set to ACCESS_LEVEL_GUEST, as a user cannot possibly be logged in if a new session is being created.
if (typeof sessionStorage.accessLevel === "undefined") { sessionStorage.name = "GUEST" sessionStorage.accessLevel = ACCESS_LEVEL_GUEST }
The LoggedInRoute wrapper component stops users who are not logged in from being able to display the components that require the user to be logged in.
render()
{
return (
<BrowserRouter>
<Switch>
<Route exact path="/Register" component={Register} />
<Route exact path="/ResetDatabase" component={ResetDatabase} />
<Route exact path="/" component={DisplayAllCars} />
<Route exact path="/Login" component={Login} />
<LoggedInRoute exact path="/Logout" component={Logout} />
<LoggedInRoute exact path="/AddCar" component={AddCar} />
<LoggedInRoute exact path="/EditCar/:id" component={EditCar} />
<LoggedInRoute exact path="/DeleteCar/:id" component={DeleteCar} />
<Route exact path="/DisplayAllCars" component={DisplayAllCars}/>
<Route path="*" component={DisplayAllCars}/>
</Switch>
</BrowserRouter>
)
}
import React, {Component} from "react"
import {Link} from "react-router-dom"
import axios from "axios"
import CarTable from "./CarTable"
import Logout from "./Logout"
import {ACCESS_LEVEL_GUEST, ACCESS_LEVEL_ADMIN, SERVER_HOST} from "../config/global_constants"
export default class DisplayAllCars extends Component
{
constructor(props)
{
super(props)
this.state = {
cars:[]
}
}
componentDidMount()
{
axios.get(`${SERVER_HOST}/cars`)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else
{
console.log("Records read")
this.setState({cars: res.data})
}
}
else
{
console.log("Record not found")
}
})
}
render()
{
return (
<div className="form-container">
{sessionStorage.accessLevel > ACCESS_LEVEL_GUEST ?
<div className="logout">
<Logout/>
</div>
:
<div>
<Link className="green-button" to={"/Login"}>Login</Link>
<Link className="blue-button" to={"/Register"}>Register</Link>
<Link className="red-button" to={"/ResetDatabase"}>Reset Database</Link> <br/><br/><br/></div>
}
<div className="table-container">
<CarTable cars={this.state.cars} />
{sessionStorage.accessLevel >= ACCESS_LEVEL_ADMIN ?
<div className="add-new-car">
<Link className="blue-button" to={"/AddCar"}>Add New Car</Link>
</div>
:
null
}
</div>
</div>
)
}
}
Only allow the user to edit a document if they have sessionStorage.accessLevel > ACCESS_LEVEL_GUEST
...
sessionStorage.accessLevel > ACCESS_LEVEL_GUEST ?
<div className="logout">
<Logout/>
</div>
...
Only allow the user to add a document if they have sessionStorage.accessLevel >= ACCESS_LEVEL_ADMIN
...
sessionStorage.accessLevel >= ACCESS_LEVEL_ADMIN ?
<div className="add-new-car">
<Link className="blue-button" to={"/AddCar"}>Add New Car</Link>
</div>
...
import React, {Component} from "react"
import {Redirect, Link} from "react-router-dom"
import axios from "axios"
import Button from "../components/Button"
import {ACCESS_LEVEL_GUEST, SERVER_HOST} from "../config/global_constants"
export default class Login extends Component
{
constructor(props)
{
super(props)
this.state = {
email:"",
password:"",
isLoggedIn:false
}
}
handleChange = (e) =>
{
this.setState({[e.target.name]: e.target.value})
}
handleSubmit = (e) =>
{
axios.post(`${SERVER_HOST}/users/login/${this.state.email}/${this.state.password}`)
.then(res =>
{
// default if not logged in
sessionStorage.name = "GUEST"
sessionStorage.accessLevel = ACCESS_LEVEL_GUEST
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else // user successfully logged in
{
console.log("User logged in")
sessionStorage.name = res.data.name
sessionStorage.accessLevel = res.data.accessLevel
this.setState({isLoggedIn:true})
}
}
else
{
console.log("Login failed")
}
})
}
render()
{
return (
<form className="form-container" noValidate = {true} id = "loginOrRegistrationForm">
<h2>Login</h2>
{this.state.isLoggedIn ? <Redirect to="/DisplayAllCars"/> : null}
<input
type = "email"
name = "email"
placeholder = "Email"
autoComplete="email"
value={this.state.email}
onChange={this.handleChange}
/><br/>
<input
type = "password"
name = "password"
placeholder = "Password"
autoComplete="password"
value={this.state.password}
onChange={this.handleChange}
/><br/><br/>
<Button value="Login" className="green-button" onClick={this.handleSubmit}/>
<Link className="red-button" to={"/DisplayAllCars"}>Cancel</Link>
</form>
)
}
}
The this.state.isLoggedIn flag is used to redirect to the DisplayAllCars component once the user successfully logs in.
When the user submits their email and password login details, the details are set to the server-side login router via an axios() method call.
The server-side router returns the user name and accessLevel, which are stored in the sessionStorage.
handleSubmit = (e) =>
{
axios.post(`${SERVER_HOST}/users/login/${this.state.email}/${this.state.password}`)
.then(res =>
{
// default if not logged in
sessionStorage.name = "GUEST"
sessionStorage.accessLevel = ACCESS_LEVEL_GUEST
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else // user successfully logged in
{
console.log("User logged in")
sessionStorage.name = res.data.name
sessionStorage.accessLevel = res.data.accessLevel
this.setState({isLoggedIn:true})
}
}
else
{
console.log("Login failed")
}
})
}
import React, {Component} from "react"
import {Redirect} from "react-router-dom"
import axios from "axios"
import Button from "../components/Button"
import {ACCESS_LEVEL_GUEST, SERVER_HOST} from "../config/global_constants"
export default class Logout extends Component
{
constructor(props)
{
super(props)
this.state = {
isLoggedIn:true
}
}
handleSubmit = (e) =>
{
e.preventDefault()
axios.post(`${SERVER_HOST}/users/logout`)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else
{
console.log("User logged out")
sessionStorage.clear()
sessionStorage.name = "GUEST"
sessionStorage.accessLevel = ACCESS_LEVEL_GUEST
this.setState({isLoggedIn:false})
}
}
else
{
console.log("Logout failed")
}
})
}
render()
{
return (
<div>
{!this.state.isLoggedIn ? <Redirect to="/DisplayAllCars"/> : null}
<Button value="Log out" className="red-button" onClick={this.handleSubmit}/>
</div>
)
}
}
The this.state.isLoggedIn flag is used to redirect to the DisplayAllCars component once the user successfully logs out.
Note that the test inside the render() method is testing for ! (i.e. false rather than true)
...
{!this.state.isLoggedIn ? <Redirect to="/DisplayAllCars"/> : null}
...
When the user logs out, we clear the sessionStorage, so that it is empty. We then set the sessionStorage to hold a GUEST user.
handleSubmit = (e) =>
{
e.preventDefault()
axios.post(`${SERVER_HOST}/users/logout`)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else
{
console.log("User logged out")
sessionStorage.clear()
sessionStorage.name = "GUEST"
sessionStorage.accessLevel = ACCESS_LEVEL_GUEST
this.setState({isLoggedIn:false})
}
}
else
{
console.log("Logout failed")
}
})
}
import React, {Component} from "react"
import {Link} from "react-router-dom"
import {ACCESS_LEVEL_GUEST, ACCESS_LEVEL_ADMIN} from "../config/global_constants"
export default class CarTableRow extends Component
{
render()
{
return (
<tr>
<td>{this.props.car.model}</td>
<td>{this.props.car.colour}</td>
<td>{this.props.car.year}</td>
<td>{this.props.car.price}</td>
<td>
{sessionStorage.accessLevel > ACCESS_LEVEL_GUEST ? <Link className="green-button" to={"/EditCar/" + this.props.car._id}>Edit</Link> : null}
{sessionStorage.accessLevel >= ACCESS_LEVEL_ADMIN ? <Link className="red-button" to={"/DeleteCar/" + this.props.car._id}>Delete</Link> : null}
</td>
</tr>
)
}
}
Always display the model, colour, year and price.
Only display the Edit button if the user is logged in (i.e. not a guest).
Only display the Delete button if the user is an administrator.
render()
{
return (
<tr>
<td>{this.props.car.model}</td>
<td>{this.props.car.colour}</td>
<td>{this.props.car.year}</td>
<td>{this.props.car.price}</td>
<td>
{sessionStorage.accessLevel > ACCESS_LEVEL_GUEST ? <Link className="green-button" to={"/EditCar/" + this.props.car._id}>Edit</Link> : null}
{sessionStorage.accessLevel >= ACCESS_LEVEL_ADMIN ? <Link className="red-button" to={"/DeleteCar/" + this.props.car._id}>Delete</Link> : null}
</td>
</tr>
)
}
import React, {Component} from "react"
import {Redirect, Link} from "react-router-dom"
import Form from "react-bootstrap/Form"
import axios from "axios"
import Button from "../components/Button"
import {ACCESS_LEVEL_ADMIN, SERVER_HOST} from "../config/global_constants"
export default class AddCar extends Component
{
constructor(props)
{
super(props)
this.state = {
model:"",
colour:"",
year:"",
price:"",
redirectToDisplayAllCars:sessionStorage.accessLevel < ACCESS_LEVEL_ADMIN
}
}
componentDidMount()
{
this.inputToFocus.focus()
}
handleChange = (e) =>
{
this.setState({[e.target.name]: e.target.value})
}
handleSubmit = (e) =>
{
e.preventDefault()
const carObject = {
model: this.state.model,
colour: this.state.colour,
year: this.state.year,
price: this.state.price
}
axios.post(`${SERVER_HOST}/cars`, carObject)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else
{
console.log("Record added")
this.setState({redirectToDisplayAllCars:true})
}
}
else
{
console.log("Record not added")
}
})
}
render()
{
return (
<div className="form-container">
{this.state.redirectToDisplayAllCars ? <Redirect to="/DisplayAllCars"/> : null}
<Form>
<Form.Group controlId="model">
<Form.Label>Model</Form.Label>
<Form.Control ref = {(input) => { this.inputToFocus = input }} type="text" name="model" value={this.state.model} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="colour">
<Form.Label>Colour</Form.Label>
<Form.Control type="text" name="colour" value={this.state.colour} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="year">
<Form.Label>Year</Form.Label>
<Form.Control type="text" name="year" value={this.state.year} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="price">
<Form.Label>Price</Form.Label>
<Form.Control type="text" name="price" value={this.state.price} onChange={this.handleChange} />
</Form.Group>
<Button value="Add" className="green-button" onClick={this.handleSubmit}/>
<Link className="red-button" to={"/DisplayAllCars"}>Cancel</Link>
</Form>
</div>
)
}
}
Check the accessLevel of the user when the component is loading. If the user is not an administrator, then set the this.state.redirectToDisplayAllCars flag to exit this component and redirect to the DisplayAllCars component.
constructor(props)
{
super(props)
this.state = {
model:"",
colour:"",
year:"",
price:"",
redirectToDisplayAllCars:sessionStorage.accessLevel < ACCESS_LEVEL_ADMIN
}
}
When the user submits the form, the new car details are sent to the server-side router via an axios() method. The this.state.redirectToDisplayAllCars flag is then set, which will cause the redirect to the DisplayAllCars component to happen.
handleSubmit = (e) =>
{
e.preventDefault()
const carObject = {
model: this.state.model,
colour: this.state.colour,
year: this.state.year,
price: this.state.price
}
axios.post(`${SERVER_HOST}/cars`, carObject)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else
{
console.log("Record added")
this.setState({redirectToDisplayAllCars:true})
}
}
else
{
console.log("Record not added")
}
})
}
import React, {Component} from "react"
import Form from "react-bootstrap/Form"
import {Redirect, Link} from "react-router-dom"
import axios from "axios"
import Button from "../components/Button"
import {ACCESS_LEVEL_NORMAL_USER, SERVER_HOST} from "../config/global_constants"
export default class EditCar extends Component
{
constructor(props)
{
super(props)
this.state = {
model: ``,
colour: ``,
year: ``,
price: ``,
redirectToDisplayAllCars:sessionStorage.accessLevel < ACCESS_LEVEL_NORMAL_USER
}
}
componentDidMount()
{
this.inputToFocus.focus()
axios.get(`${SERVER_HOST}/cars/${this.props.match.params.id}`)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else
{
this.setState({
model: res.data.model,
colour: res.data.colour,
year: res.data.year,
price: res.data.price
})
}
}
else
{
console.log(`Record not found`)
}
})
}
handleChange = (e) =>
{
this.setState({[e.target.name]: e.target.value})
}
handleSubmit = (e) =>
{
e.preventDefault()
const carObject = {
model: this.state.model,
colour: this.state.colour,
year: this.state.year,
price: this.state.price
}
axios.put(`${SERVER_HOST}/cars/${this.props.match.params.id}`, carObject)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else
{
console.log(`Record updated`)
this.setState({redirectToDisplayAllCars:true})
}
}
else
{
console.log(`Record not updated`)
}
})
}
render()
{
return (
<div className="form-container">
{this.state.redirectToDisplayAllCars ? <Redirect to="/DisplayAllCars"/> : null}
<Form>
<Form.Group controlId="model">
<Form.Label>Model</Form.Label>
<Form.Control ref = {(input) => { this.inputToFocus = input }} type="text" name="model" value={this.state.model} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="colour">
<Form.Label>Colour</Form.Label>
<Form.Control type="text" name="colour" value={this.state.colour} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="year">
<Form.Label>Year</Form.Label>
<Form.Control type="text" name="year" value={this.state.year} onChange={this.handleChange} />
</Form.Group>
<Form.Group controlId="price">
<Form.Label>Price</Form.Label>
<Form.Control type="text" name="price" value={this.state.price} onChange={this.handleChange} />
</Form.Group>
<Button value="Update" className="green-button" onClick={this.handleSubmit}/>
<Link className="red-button" to={"/DisplayAllCars"}>Cancel</Link>
</Form>
</div>
)
}
}
Check the accessLevel of the user when the component is loading. If the user is not a normal user or an administrator, then they must not be logged in. In this case, set the this.state.redirectToDisplayAllCars flag to exit this component and redirect to the DisplayAllCars component.
constructor(props)
{
super(props)
this.state = {
model: ``,
colour: ``,
year: ``,
price: ``,
redirectToDisplayAllCars:sessionStorage.accessLevel < ACCESS_LEVEL_NORMAL_USER
}
}
When the user submits the form, the new car details are sent to the server-side router via an axios() method. The this.state.redirectToDisplayAllCars flag is then set, which will cause the redirect to the DisplayAllCars component to happen.
axios.put(`${SERVER_HOST}/cars/${this.props.match.params.id}`, carObject) .then(res => { if(res.data) { if (res.data.errorMessage) { console.log(res.data.errorMessage) } else { console.log(`Record updated`) this.setState({redirectToDisplayAllCars:true}) } } else { console.log(`Record not updated`) } })
import React, {Component} from "react"
import {Redirect} from "react-router-dom"
import axios from "axios"
import {SERVER_HOST} from "../config/global_constants"
export default class DeleteCar extends Component
{
constructor(props)
{
super(props)
this.state = {
redirectToDisplayAllCars:false
}
}
componentDidMount()
{
axios.delete(`${SERVER_HOST}/cars/${this.props.match.params.id}`)
.then(res =>
{
if(res.data)
{
if (res.data.errorMessage)
{
console.log(res.data.errorMessage)
}
else // success
{
console.log("Record deleted")
}
this.setState({redirectToDisplayAllCars:true})
}
else
{
console.log("Record not deleted")
}
})
}
render()
{
return (
<div>
{this.state.redirectToDisplayAllCars ? <Redirect to="/DisplayAllCars"/> : null}
</div>
)
}
}
Pass the id of the car to be deleted to the router via an axios() method call.
Then set the this.state.redirectToDisplayAllCars flag to true. This will cause the redirect to DisplayallCars to happen.
In the real world, we would not relay on sessionStorage to store the logged-in state, as sessionStorage can be minipulated on the client-side. We shall see in the next section of these notes how to securly store the loggin-in state on the server-side.
const router = require(`express`).Router()
const usersModel = require(`../models/users`)
const bcrypt = require('bcryptjs'); // needed for password encryption
// IMPORTANT
// Obviously, in a production release, you should never have the code below, as it allows a user to delete a database collection
// The code below is for development testing purposes only
router.post(`/users/reset_user_collection`, (req,res) =>
{
usersModel.deleteMany({}, (error, data) =>
{
if(data)
{
const adminPassword = `123!"£qweQWE`
bcrypt.hash(adminPassword, parseInt(process.env.PASSWORD_HASH_SALT_ROUNDS), (err, hash) =>
{
usersModel.create({name:"Administrator",email:"admin@admin.com",password:hash,accessLevel:parseInt(process.env.ACCESS_LEVEL_ADMIN)}, (createError, createData) =>
{
if(createData)
{
res.json(createData)
}
else
{
res.json({errorMessage:`Failed to create Admin user for testing purposes`})
}
})
})
}
else
{
res.json({errorMessage:`User is not logged in`})
}
})
})
router.post(`/users/register/:name/:email/:password`, (req,res) => {
// If a user with this email does not already exist, then create new user
usersModel.findOne({email:req.params.email}, (uniqueError, uniqueData) =>
{
if(uniqueData)
{
res.json({errorMessage:`User already exists`})
}
else
{
bcrypt.hash(req.params.password, parseInt(process.env.PASSWORD_HASH_SALT_ROUNDS), (err, hash) =>
{
usersModel.create({name:req.params.name,email:req.params.email,password:hash}, (error, data) =>
{
if(data)
{
res.json({name: data.name, accessLevel:data.accessLevel})
}
else
{
res.json({errorMessage:`User was not registered`})
}
})
})
}
})
})
router.post(`/users/login/:email/:password`, (req,res) =>
{
usersModel.findOne({email:req.params.email}, (error, data) =>
{
if(data)
{
bcrypt.compare(req.params.password, data.password, (err, result) =>
{
if(result)
{
res.json({name: data.name, accessLevel:data.accessLevel})
}
else
{
res.json({errorMessage:`User is not logged in`})
}
})
}
else
{
console.log("not found in db")
res.json({errorMessage:`User is not logged in`})
}
})
})
router.post(`/users/logout`, (req,res) => {
res.json({})
})
module.exports = router
The login router queries the users document against the login email. If a match exists, then the router compares the matched document's hashed password against the login password. If these match, then the router returns the user's name and accessLevel to the axios() method that had called the router.
router.post(`/users/login/:email/:password`, (req,res) =>
{
usersModel.findOne({email:req.params.email}, (error, data) =>
{
if(data)
{
bcrypt.compare(req.params.password, data.password, (err, result) =>
{
if(result)
{
res.json({name: data.name, accessLevel:data.accessLevel})
}
else
{
res.json({errorMessage:`User is not logged in`})
}
})
}
else
{
console.log("not found in db")
res.json({errorMessage:`User is not logged in`})
}
})
})
The logout route is just a placeholder for the moment. It returns an empty JSON object. It will be used in the next section of the notes.
router.post(`/users/logout`, (req,res) => {
res.json({})
})
Change the code in the example above, so that the user needs to login using a username and password. The various users' username and password details should be held in a 'users' collection (table).
Add code to allow a user to register to use the system.
Rather than storing the user's logged-in state in sessionStorage, we can store a token for that user. The token can be generated when the user logs in. The token and the user's email can be stored in localStorage and in the 'users' collection. The localStorage data can be used to allow the user to automatically login to the system the next time they use the system. With this approach, the login code checks to see if the localStorage.user and localStorage.token properties have been set. If yes, then it compares the two values against the values held in the 'user' collection. It they match, a new token is generated to replace the old one and the user is logged into the system.
What do you think is the purpose of changing the token each time a user is automatically logged in?
Write code to implement the token login code that is outlined above.
Copyright Derek O' Reilly, Dundalk Institute of Technology (DkIT), Dundalk, Co. Louth, Ireland.