We can imagine that we have already meteor.js authentication as like Signup
Signin
& Signout
but we have to worry about some pages restriction such as Todo
page which is available right now without a user authentication but we need user can access this page after Signin
& after Signin
he can’t access the Signin
& Signuot
page.
On react router 4
it has some changes such as history
, on the react router < 4
it included with browserHistory
but now in 4 it’s not present so we need to install this package from npm such as `npm install history` and then in routes
import React from 'react'; import { Router, Route, Switch } from 'react-router-dom'; import createBrowserHistory from 'history/createBrowserHistory'; const history = createBrowserHistory(); const publicPages = ['/', '/signup']; const privatePages = ['/todo']; const onEnterPublicPage = () => { if (Meteor.userId()) { history.replace('/todo'); } }; const onEnterPrivatePage = () => { if (!Meteor.userId()) { history.replace('/'); } }; export const onAuthenticationChange = (isAuthenticated) => { console.log('is authenticated...', isAuthenticated); const pathname = this.location.pathname; const isUnauthenticatedPage = publicPages.includes(pathname); const isAuthenticatedPage = privatePages.includes(pathname); if (isAuthenticated && isUnauthenticatedPage) { console.log('Autenticated'); history.replace('/todo'); } else if (!isAuthenticated && isAuthenticatedPage) { console.log('Not Authenticated'); history.replace('/'); } } export const routes = ( <Router history = {history}> <Switch> <Route exact path="/" component={Signin} onEnter={onEnterPublicPage} /> <Route exact path="/signup" component={Signup} onEnter={onEnterPublicPage} /> <Route exact path="/todo" component={Todo} onEnter={onEnterPrivatePage} /> <Route path="*" component={NotFound}/> </Switch> </Router> );
Now in the main.js
file add the following
import { routes, onAuthenticationChange } from '../imports/routes/routes'; Tracker.autorun(() => { const isAuthenticated = !!Meteor.userId(); onAuthenticationChange(isAuthenticated); });
That’s it.