Как мы можем создать и вернуть страницу 404, если кто-то обращается к страницам через url без входа в систему - PullRequest
Новая
       1

Как мы можем создать и вернуть страницу 404, если кто-то обращается к страницам через url без входа в систему

3 голосов
/ 16 июня 2020

Где мы добавляем страницу 404, если кто-то пытается получить доступ к домашней или любой другой странице через url, например: http://localhost:3000/home без входа в систему. Страницы Home, Profile, Aboutus доступны только после успешного входа в систему.

App.js

const App = () => {                     
  return (
   <UserProfileContext.Provider value={{ data, setData }}>
      <BrowserRouter>
        <>
     <Navigation />
      <Switch>
          <ProtectedRoute exact path="/" component={Home} />
          <ProtectedRoute path="/profile" component={Profile} />
          <ProtectedRoute path="/aboutus" component={Aboutus} />
          <Route path="/register" component={Register} />
          <Route path="/login" component={Login} />
      </Switch>
    </>
   </BrowserRouter>
  </UserProfileContext.Provider>
  );
};
ReactDOM.render(
  React.createElement(App, null),
  document.getElementById("root")
);

export default App;

Navigation.js

const Navigation = () => {
    const history = useHistory();
    const { data } = useContext(UserProfileContext); // added 16 jun based on stack

    const divStyle = {
        float:'left',
        color: '#64cad8', 
        padding: '0px 0px 0px 10px',
        font:'Lucida, sans-serif'
      };

    function logout() {
        localStorage.removeItem('loginEmail')
        localStorage.removeItem('Privilege')
        history.push('/login')
        window.location.reload(true);
      }

    return localStorage.getItem('loginEmail') &&
        <div className="App">
            <div className="wrapper">
                <nav className="siteNavigation_nav_links">
                <div className="clubLogo landing"style={divStyle}><b>Southside Soccer</b></div>
                    <NavLink className="mobile_register_link" to="/">Home</NavLink>
                    <NavLink className="mobile_register_link" to="/profile">Profile</NavLink>
                    <NavLink className="mobile_login_link" to="/login" onClick={logout}>Logout</NavLink>
                    <NavLink className="mobile_login_link" to='/aboutus'>About us</NavLink>
                <div className="profileImage nav menu">
                <span>{data.name}</span>|<img src={data.photo}></img>
                </div>
                </nav>
            </div>
        </div>
}

export default Navigation;

Ответы [ 3 ]

2 голосов
/ 16 июня 2020

Ошибка 404 - это когда страница не найдена - я думаю, что вы ищете ошибку 401 (что является ошибкой несанкционированного доступа). Сначала отвечу на ваш вопрос; для обработки ошибки 401 в реактивном маршрутизаторе вы обычно используете маршруты по умолчанию:

В более раннем реактивном маршрутизаторе: 

<Route path='*' component={NotFoundComponent} />

В более новых реактивных маршрутизаторах (версии 4 и 5) просто поместите route last: 

<Route path="/404" component={GenericNotFound} />
<Redirect to="/404" />

Однако это не решит вашу проблему. Что вы хотите сделать, так это показать страницу с ошибкой, если пользователь не вошел в систему. НЕ всякий раз, когда пользователь обращается к несуществующему URL-адресу.

Итак, есть два способа сделать то, что вы хотите. Первый способ - с сервером (так обычно и делают в индустрии). У вас есть три страницы (страница входа. js, ошибка 401. js, главное приложение. js). Сначала сервер отправляет страницу входа. js. Затем, когда пользователь входит в систему, вы отправляете страницу main-app. js. Если пользователь не вошел в систему, но пытается получить доступ к URL-адресу в главном приложении. js, вы отправляете 401-error. js page.

Я понимаю, что это несет много накладных расходов, поэтому вместо этого вы можете сделать это немного более простым, но менее безопасным способом через одностраничное приложение - что, вероятно, вы и собираетесь делать.

Сначала вам нужно поддерживать некоторое состояние о независимо от того, вошел ли пользователь в систему глобально во всем вашем приложении (возможно, с помощью redux). Затем в каждом из ваших компонентов (Home, Profile et c.) Вы должны проверить, вошел ли пользователь в систему, если нет, то перенаправить на страницу 404.

Вы можете используйте history для программного перенаправления на страницу: Программная навигация с использованием реагирующего маршрутизатора 

 
 class Foo extends Component {
    componentDidMount() {
      if (reduxStore.userIsLoggedIn === false) {
          this.props.history.push('/401')
      }
    }
    /** -- snip -- **/
 }
 
 /** -- snip -- **/
 <Route render={({ history }) => 
     <Foo history={history}/>
 }/>
2 голосов
/ 16 июня 2020

для страницы 404 или страницы с ошибкой сделайте следующее:

<Route path="*" component={ErrorPage} />

не забудьте использовать exact на маршрутах, которые вы хотите, чтобы представления были доступны на

вашем защищенный маршрут должен перенаправлять на вашу страницу входа, если не прошел успешную аутентификацию

0 голосов
/ 16 июня 2020

В начале каждой страницы вы sh проверяете статус входа (переменных) каждого пользователя! Если он / она не авторизовались, перенаправьте его / ее на соответствующую страницу! Например, страница, на которой отображается сообщение «сначала необходимо войти в систему».

...