Аутентифицированные маршруты в activJS с использованием activ-router-dom

Question

Описание ::

Я работаю над приложением ReactionJS и использую act-router-dom для маршрутизации. Если пользователь не авторизован, он переходит на «http://localhost:3000/login" и после успешного входа перенаправляется на« http://localhost:3000/dashboard".. После перезагрузки этой страницы отображается пустая страница.

Чтобы решить эту проблему, я добавил «/ app» после моего базового URL, и теперь он идет перед каждым URL-адресом маршрутизации. Теперь внутренняя страница маршрутизации выглядит как «http://localhost:3000/app/dashboard". Но я не хочу добавлять «приложение» перед каждым элементом маршрутизации, Мне нужен URL-адрес маршрутизации, base_url / путь маршрутизации страницы.

Маршрутизация пустой страницы ::

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

const InitialPath = ({ component: Component, authUser, ...rest }) => {
   return (<Route
         {...rest}
         render={props =>
            authUser
               ? <Component {...props} />
               :
               <Redirect
                  to={{
                     pathname: '/login',
                     state: { from: props.location }
                  }}
               />
         }
      />
   )
}

class App extends Component {
   constructor(props) {
      super(props);
   }

   render() {
      let isUserLogggedIn = localStorage.getItem('isUserLoggedIn');
      const { location, match } = this.props;
      let url = location.pathname.split('/');
      if (location.pathname === '/login') {
         localStorage.clear();
      }
      if (location.pathname === '/') {
         if (!isUserLogggedIn) {
            return (<Redirect exact from='/' to={`${match.url}login`} />);
         } else {
            return (<Redirect exact from='/' to={`${match.url}app`} />);
         }
      }
      if ((url[1] !== "app") && (url[1] !== "login")) {
         return (<Redirect exact from={location.pathname} to={`${match.url}login`} />);
      }
      return (
         <>
            <BrowserRouter>
               <Switch>
                  <InitialPath
                     path={`${match.url}app`}
                     authUser={isUserLogggedIn}
                     component={DefaultLayout}
                     location={location}
                  />
                  <Route path='/login' component={Login} />
               </Switch>
            </BrowserRouter>
         </>
      );
   }
}

export default App;

Если «приложение» удалено из корня, то его работа продолжается и появляется ошибка.

ERROR ::

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

Я думаю, что проблема не с URL.

Попытка обработать вещи localStorage методом render - не лучшая идея.Для этого вы должны использовать методы жизненного цикла, т.е. componentDidMount, componentDidUpdate.

Ваш App компонент кажется перегруженным логикой.Логика аутентификации должна быть в компоненте Login, когда он (Login) монтируется, он должен очистить хранилище.Когда пользователь успешно проходит аутентификацию, он (Login) должен сохранить идентификатор сеанса в хранилище.

Следующее, что связываться с местоположениями самостоятельно, не нужно, пусть react-router сделает это за вас.

class App extends Component {
  componentDidUpdate () {
    this.setState({ isUserLoggedIn: !!localStorage.getItem("isUserLoggedIn") });
  }

  render () {
    const { isUserLogggedIn } = this.state;

    return (
      <BrowserRouter>
        <Switch>
          <InitialPath
            path="/dashboard"
            authUser={isUserLogggedIn}
            component={DefaultLayout}
            location={location}
          />
          <Route path="/login" component={Login} />
        </Switch>
      </BrowserRouter>
    );
  }
}

class Login extends Component {
  componentDidMount () {
    localStorage.removeItem("isUserLogggedIn");
  }

  render () {
    // some render stuff
    //
    // after successfull login
    // you should save `isUserLogggedIn` into localStorage 
    // and redirect to the main page
  }
}