Блог

Главная - Вопросы по программированию - Почему при изменении маршрута вызывается trigger .info/connected onDisconnect()?

Почему при изменении маршрута вызывается trigger .info/connected onDisconnect()?

#reactjs #firebase #firebase-realtime-database #jsx

# #reactjs #firebase #firebase-realtime-database #jsx

Вопрос:

Почему маршрутизатор React отключает текущего пользователя Firebase AuthUser при проверке статуса авторизации для другого маршрута?

Когда я переключаюсь между маршрутами (Home, Account и т. Д.), вызывается функция onDisconnect(), И статус переходит от connected к disconnect обратно к connected в течение пары секунд каждый раз.

Маршруты:

 
const App = () => (
    <Router>
        <div>
        <CustomNavbar />
        <Switch>
            <Route path={ROUTES.SIGN_UP} component={SignUpPage} />
            <Route path={ROUTES.SIGN_IN} component={SignInPage} />
            <Route path={ROUTES.PASSWORD_FORGET} component={PasswordForgetPage} />
            <Route exact path={ROUTES.HOME} component={HomePage} />
            <Route path={ROUTES.ACCOUNT} component={AccountPage} />
            <Route path={ROUTES.ADMIN} component={AdminPage} />
            <Route path={ROUTES.MANAGER} component={Manager} />
            <Route path={ROUTES.DEFAULT_SETTINGS} component={DefaultSettings} />
            <Redirect to={ROUTES.HOME} />
        </Switch>
        </div>  
    </Router>

    );

export default withAuthentication(App);

Авторизация пользователя-слушателя:

       this.listener = this.props.firebase.onAuthUserListener(
        authUser => {
            this.setState({ authUser });

            var myConnectionsRef = this.props.firebase.db.ref('users/' authUser.uid '/connected')

            var connectedRef = this.props.firebase.db.ref('.info/connected');

            connectedRef.on('value', function(snap) {
              console.log(snap.val())
              if(snap.val() === true){
                  myConnectionsRef.onDisconnect().set(false).then(() => {
                  myConnectionsRef.set(true);
                })
              }
            });    
        });

Комментарии:

1. Не могли бы вы опубликовать весь соответствующий код здесь, пожалуйста?

2. Я не совсем уверен, как показать каждую конкретную часть, не вводя запутанный объем кода .. Надеялся в общих чертах выяснить, было ли это нормальным поведением при работе с маршрутизатором react, или никогда не должно быть «ложных» отключений только потому, что маршрут изменился.

3. Нет причин, по которым изменение маршрутов должно отключить вас, поэтому имеет смысл посмотреть, где вы проверяете статус авторизации, и ваши маршруты.

4. Я добавил некоторый код

5. Если вызывается обработчик отключения на стороне сервера ( myConnectionsRef.onDisconnect().set(false) ), сервер потерял отслеживание клиента. Если это происходит последовательно, это действительно означает, что веб-сокет между клиентом и сервером закрывается при изменении маршрута. Возможно, вы захотите проверить сетевой трафик, чтобы увидеть, выполняется ли реальный переход страницы. Если вы так не думаете, можете ли вы настроить воспроизведение проблемы на сайте, например stackblitz.com , чтобы мы могли взглянуть?

Ответ №1:

Кажется, я решил свою проблему.

Я использую компонент навигационной панели React Boostrap, который включает этот тег:

 <Nav.Link>

Я заменял это для тега маршрутизатора React:

 <Link>

Чтобы сохранить стиль, который у меня был раньше, просто оберните тег следующим образом:

   <Nav.Link>
       <Link to={ROUTES.DEFAULT_SETTINGS}> Settings </Link>
  </Nav.Link>

…исправлена потеря соединения во время изменения маршрута при сохранении стиля.

Поскольку:

 <Nav.Link href={ROUTES.DEFAULT_SETTINGS}> Settings </Nav.Link>

Не изменяет маршруты должным образом, а вместо этого обновляет страницу, есть ли более правильная практика для отображения начальной загрузки ссылки?

Метки: