CODEWITHSUNDEEP
reactjsurl
BluePilot
BluePilot

Reputation: 403

Prevent user from directly accessing URL in React application?

Is there a way to stop the user from directly accessing a URL on my application? For example, we have a page that is accessed as localhost:3000/scheduling but I want to re-route back to the homepage. I couldn't find many helpful articles that could achieve this. I am using React by the way.

Thanks!

Upvotes: 2

Views: 6274

Answers (3)

prashanthh
prashanthh

Reputation: 21

We can use Conditional rendering tracing the history.

You can also add conditions using this.props.history.location.key or this.props.history.action

  1. Key exists and action is 'PUSH' when we redirect user using this.props.history.push
  2. Key property doesn't exist and action is 'POP' when a user tries to access the URL directly

return this.props.history.location.key ? (<div></div>) : null

Upvotes: 0

Khabir
Khabir

Reputation: 5854

You can check this example:

import React from 'react'
import {
  BrowserRouter as Router,
  Route,
  Link,
  Redirect,
  withRouter
} from 'react-router-dom'

const fakeAuth = {
  isAuthenticated: false,
  authenticate(cb) {
    this.isAuthenticated = true
    setTimeout(cb, 100)
  },
  signout(cb) {
    this.isAuthenticated = false
    setTimeout(cb, 100)
  }
}

const Public = () => <h3>Public</h3>
const Protected = () => <h3>Protected</h3>

class Login extends React.Component {
  state = {
    redirectToReferrer: false
  }
  login = () => {
    fakeAuth.authenticate(() => {
      this.setState(() => ({
        redirectToReferrer: true
      }))
    })
  }
  render() {
    const { from } = this.props.location.state || { from: { pathname: '/' } }
    const { redirectToReferrer } = this.state

    if (redirectToReferrer === true) {
      return <Redirect to={from} />
    }

    return (
      <div>
        <p>You must log in to view the page</p>
        <button onClick={this.login}>Log in</button>
      </div>
    )
  }
}

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route {...rest} render={(props) => (
    fakeAuth.isAuthenticated === true
      ? <Component {...props} />
      : <Redirect to={{
          pathname: '/login',
          state: { from: props.location }
        }} />
  )} />
)

export default function AuthExample () {
  return (
    <Router>
      <div>
        <ul>
          <li><Link to="/public">Public Page</Link></li>
          <li><Link to="/protected">Protected Page</Link></li>
        </ul>
        <Route path="/public" component={Public}/>
        <Route path="/login" component={Login}/>
        <PrivateRoute path='/protected' component={Protected} />
      </div>
    </Router>
  )
}

Source

Upvotes: 0

larachiwnl
larachiwnl

Reputation: 357

You can do it in many ways, this is just an example : 

  const location = useLocation();
  let history = useHistory();

  if(location.state == undefined || location.state == null || location.state == ''){
  history.push("/");   
  }

'/' is by default your home page.

Upvotes: 1

Related Questions