Как защитить маршруты, чтобы не было доступа напрямую через URL?

Question

//this route is define in app.js
<Route path="/edit" component={Edit}/>
 //this is navlink
<NavLink  to={{pathname:"/edit",state:{index:index}}}>Edit</NavLink>
 // class
class Edit extends Component {


constructor(props){
    super(props)

    this.state = {

        index:props.location.state.index,
        title:'',

    };
}

componentDidMount(){


    axios.get("http://localhost:5000/gettitle",{headers: {token: Cookies.get('adtoken')}})
    .then(response => {

        this.setState({
            title:response.data.jobs[this.state.index].title,


        })



    })
    .catch(error => {
        console.log(error)
    })


} 
render() {

}
}

export default Edit;

Когда я нажимаю на эту навигационную ссылку, она перемещается в / редактировать с помощью реквизита, но когда я непосредственно пишу / редактирую через URL, это дает ошибки, потому что это доступ к / редактировать компонент без реквизита

Как я могу защитить / отредактировать, чтобы к нему нельзя было получить доступ напрямую через URL? Спасибо

Answer 1

Вы можете использовать PrivateRoute компонент:

const PrivateRoute = ({ component: Component, ...rest }) => (
  <Route
    {...rest}
    render={props =>
      props?.location.state?.index ? (
        <Component {...props} />
      ) : (
        <Redirect to="/404" />
      )
    }
  />
);

Здесь пример

Answer 2

Похоже, вы используете React Router , поэтому мой ответ будет для этой библиотеки.

Чтобы защитить /edit, вы можете вызвать <Redirect />, если реквизиты отсутствует.

Компонент EditPage будет выглядеть примерно так:

import React from 'react'
import { Redirect } from 'react-router-dom'

const EditPage = ({ index }) => {
  if(index){
    return <Redirect to="/" />
  } else {
    return <div>my protected page</div>
  }
}
export default EditPage

Answer 3

Если вы используете response-router-v3 или менее, вы можете использовать обратный вызов Route onEnter

<Route onEnter={checkIfValidUrl}></Route>

, а в функции обратного вызова вы получите функцию get replace. которую вы можете использовать для перенаправления на страницу желаний.

const checkIfValidUrl = (nextState, replace, cb) => {
  // Your condition goes here.
}

Но если вы используете response-router-v4 или выше, можете создать компонент высокого порядка (HO C), чтобы проверить, является ли этот маршрут действительным маршрут или нет.

Если ваше приложение поддерживает рендеринг на стороне сервера, вы можете написать код на сервере для обработки этого сценария.