Как предотвратить изменение URL-маршрута React, если не подтверждено - PullRequest
Новая
       15

Как предотвратить изменение URL-маршрута React, если не подтверждено

0 голосов
/ 23 апреля 2020

Аннотация : URL-адрес посещает защищенный маршрут aka /create-post на короткое время и возвращается к URL-адресу перенаправления /login, если пользователь не аутентифицирован.

Справочная информация : Я выполнил защиту указанных c маршрутов (YAY!), Однако всякий раз, когда пользователь щелкает запрещенный маршрут, который можно посетить, только если вы прошли аутентификацию, URL-адрес изменяется на URL-адрес защищенного маршрута (/create-post) и внезапно возвращаются на URL перенаправления (/login), предполагая, что они не аутентифицированы.

Анализ : есть хорошие и плохие новости:

(1) Хорошие новости : неавторизованный пользователь не способен просматривать содержимое защищенного маршрута (create-post), учитывая логику рендеринга c, которая имеется в моем компоненте ProtectedRoute.

(2) Плохие новости : неавторизованный пользователь по-прежнему может просматривать URL (, но не содержимое ) защищенного маршрута (/create-post) только на долю секунды , а затем URL переключается на URL перенаправления (/login)

(3) Обнадеживающие новости : даже Если неавторизованный пользователь увидит защищенный URL (/create-post), он все равно не сможет ввести его в поле URL и посетить его, если он не аутентифицирован.

Вопрос : Может ли кто-нибудь помочь или порекомендовать стратегию сокрытия URL-адреса от неавторизованного пользователя? Спасибо!

Приложение. js

import React, {Component} from 'react'
import './App.css'

import Signup from './components/Signup'
import Login from './components/Login'
import Feed from './components/Feed'
import CreatePost from './components/Createpost' 
import ProtectedRoute from './components/Protectedroute'

import {
    BrowserRouter as Router,
    Switch,
    Link,
    Route
} from 'react-router-dom'


class App extends Component {
    render() {
        return(
            <Router>
                <div>
                    <Link to ='/signup'>Signup</Link>
                    <br />
                    <Link to = '/login'>Login</Link>
                    <br />
                    <Link to ='/create-post'>Create Post</Link>
                    <br />
                    <Link to ='/feed'>Feed</Link>
                </div>
                <Switch>
                    <Route path = '/signup' component = {Signup} />
                    <Route path = '/login' component = {Login} />
                    <Route path = '/feed' component = {Feed} />
                    <ProtectedRoute path = '/create-post' component = {CreatePost} />
                </Switch>
            </Router>
        )
    }
}

export default App

Protectedroute. js

import React, {Component} from 'react'
import { Route, Redirect } from 'react-router-dom'


class ProtectedRoute extends Component {
    constructor(props) {
        super(props)

        this.state = {
            isAuthenticated: false,
            isLoading: true
        }
        this.isAuthenticated = this.isAuthenticated.bind(this)
    }

    componentDidMount() {
        console.log('--componentDidMount--')
        this.isAuthenticated()
    }

    isAuthenticated() {
        const url = 'http://localhost:9000/api/auth'
        fetch(url, {
            method: 'GET',
            credentials: 'include',
            headers: {
                'Content-Type' : 'application/json'
            }
        })
        .then((response) => response.text())
        .then((data) => {
            console.log(data)
            if (data === 'true') {
                this.setState({
                    isAuthenticated: true,
                    isLoading: false
                })
            } else {
                this.setState({
                    isAuthenticated: false,
                    isLoading: false
                })
            }
        })
        .catch((err) => {
            console.log('Error')
        })
    }
    render() {
        const Component = this.props.component
        if (this.state.isLoading === true) {
            return (<div>Loading</div>)
        }
        return(
            <Route render={(props) => this.state.isAuthenticated && !this.state.isLoading ? (<Component {...props}/>) : (<Redirect to ='/login' />)} />
        )

    }
}

export default ProtectedRoute
...