Last active
April 5, 2021 15:32
-
-
Save alexanmtz/9691783cb89a8114566039f35f76a889 to your computer and use it in GitHub Desktop.
Routes on front-end using react router
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
class Auth { | |
/** | |
* Authenticate a user. Save a token string in Local Storage | |
* | |
* @param {string} token | |
*/ | |
/* eslint-disable no-undef */ | |
static authenticateUser (token) { | |
localStorage.setItem('token', token) | |
} | |
static authNotified () { | |
localStorage.setItem('authNotified', true) | |
} | |
static getAuthNotified () { | |
return localStorage.getItem('authNotified') | |
} | |
static storeReferer (path) { | |
localStorage.setItem('referer', path) | |
} | |
static getReferer () { | |
return localStorage.getItem('referer') | |
} | |
/** | |
* Check if a user is authenticated - check if a token is saved in Local Storage | |
* | |
* @returns {boolean} | |
*/ | |
static isUserAuthenticated () { | |
return localStorage.getItem('token') !== null | |
} | |
/** | |
* Deauthenticate a user. Remove a token from Local Storage. | |
* | |
*/ | |
static deauthenticateUser () { | |
localStorage.removeItem('token') | |
} | |
/** | |
* Get a token value. | |
* | |
* @returns {string} | |
*/ | |
static getToken () { | |
return localStorage.getItem('token') | |
} | |
} | |
export default Auth |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import PropTypes from 'prop-types' | |
import { | |
Route, | |
Redirect | |
} from 'react-router-dom' | |
import Auth from '../../modules/auth' | |
const PrivateRoute = ({ component: Component, ...rest }) => ( | |
<Route | |
{ ...rest } | |
render={ props => | |
Auth.isUserAuthenticated() ? ( | |
<Component { ...props } /> | |
) : ( | |
<Redirect | |
to={ { | |
pathname: '/', | |
state: { from: props.location } | |
} } | |
/> | |
) | |
} | |
/> | |
) | |
PrivateRoute.propTypes = { | |
component: PropTypes.any, | |
location: PropTypes.object | |
} | |
export default PrivateRoute |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import React from 'react' | |
import { Route, HashRouter, Switch } from 'react-router-dom' | |
import PrivateRoute from '../components/session/private-route' | |
import Session from '../components/session/session' | |
import ProfileContainer from '../containers/profile' | |
import TaskExplorer from '../components/task/task-explorer' | |
export default props => ( | |
<HashRouter> | |
<Switch> | |
<PrivateRoute path='/profile' component={ ProfileContainer } /> | |
<Route path='/tasks/explore' component={ TaskExplorer } /> | |
<Route exact path='/token/:token' component={ Session } /> | |
</Switch> | |
</HashRouter> | |
) |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
@rtvsk yes it means to store into the localStorage. The redux store is not persistent, so it would have to store on DB, maybe in the user database.