Как выйти из системы 401 с помощью клиента выборки для запросов данных? - PullRequest
Новая
       72

Как выйти из системы 401 с помощью клиента выборки для запросов данных?

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

В веб-приложении я повторно использую dataProvider, указанный на react-admin веб-сайте: https://marmelab.com/react-admin/DataProviders.html#data -провайдеры в другом приложении реагирования.

Они могут отключаться и перенаправить на вход в систему, если любой запрос возвращает ответ 401.

В моем другом приложении реакции, которое не является реакцией администратора, у меня нет этого перенаправления при сбое моего запроса (тайм-аут сеанса).

Вот как выглядит мой dataProvider: 

const dataProvider = {
    getList:    (resource, params) => Promise,
    getOne:     (resource, params) => Promise,
    getMany:    (resource, params) => Promise,
    getManyReference: (resource, params) => Promise,
    create:     (resource, params) => Promise,
    update:     (resource, params) => Promise,
    updateMany: (resource, params) => Promise,
    delete:     (resource, params) => Promise,
    deleteMany: (resource, params) => Promise,
}

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

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

1 Ответ

1 голос
/ 27 апреля 2020

Много не могу сказать без какого-либо другого кода. Нужно что-то еще, чтобы мы могли воспроизвести. Promise является ли прямой ссылкой на библиотеку Promise, которую вы используете? Ответ Specifi c полностью зависит от архитектуры и другой имеющейся у вас библиотеки поддержки.

Это шаги, которые мы выполняем с redux, react-router-dom

  1. Сбой аутентификации / запроса данных
  2. Уничтожить учетные данные localstore.
  3. Инициируйте побочный эффект / изменение состояния приложения с помощью LogoutAction
  4. Обновите избыточное хранилище с помощью состояния приложения.
  5. Компонент высшего порядка PrivateRoute охватывает все маршруты, которые должны быть закрытыми. Он проверяет состояние isLoggedIn и возвращает Компонент страницы или перенаправляет пользователя на /login

например 

// handle promise error
    private handleError = (errorMessage: Error) => {
        const message = JSON.parse(errorMessage.message);
        if (message.status === 401) {

            this.authentication.logout(); // triggers logout actions and destroy credentials
        }
        throw errorMessage;
    }


    private destroyUserCredentials() {
        this.tokenResponse = null;
        this.tokenClaims = null;
        this.tokenHasExpired = true;
        this.accessToken = null;
        this.localStorage.removeItem(this.storageKey);
    }


 // dispatch action to change redux store state
 appStore.dispatch(LogOutAction());

// Private route HOC
export const PrivateRouteComponent = ({ component: Component, state: state, ...rest }) => {
    const renderComponent = (props) => {
        if (state.login.isLoggedIn) {
            return <Component {...props} />;
        } else {
            return <Redirect to='/login' />;
        }
    };

    return (
      <Route
        {...rest}
        render={renderComponent}
      />
    );
  };

// REF: pluralsight connect container
function mapStateToProps(state, ownProps) {
    return {
        state: {
            login: state.authenticate
        }
    };
}

export const PrivateRoute = connect(mapStateToProps)(PrivateRouteComponent);


// Route setup
 <Provider store={appStore}>
            <BrowserRouter>
                <Switch>
                    <Route path='/login' component={LoginPage} />
                    <PrivateRoute path='/analytics' component={HomePage} />
                    <PrivateRoute path='/account' component={AccountPage} />
                </Switch>
            </BrowserRouter>
        </Provider>
...