Маршруты, прошедшие проверку подлинности, которые нельзя изменить с помощью расширения Chrome для инструментов Reduce Developer Tools.

Question

Я создал авторизованный маршрут с компонентом HOC, но это имеет проблему.

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

Пользователь может изменить в этом инструменте разработчика chrome разрешение «РАЗРЕШЕНИЕ» на другое слово и изменить статус приложения.

Не могли бы вы сделатьэто чтобы пользователь не мог сменить магазин?

App.js

class App extends Component {
  render() {
    return (   
        <BrowserRouter>
            <Switch>
              <AuthorizedComponent path="/administration" authed={true} permissions={["PERMISSION"]} component={AdministrationPage} />
            </Switch>
        </BrowserRouter>
    );
  }
}

AuthorizedComponent.js

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

    render() {
        const { user } = this.props;
        const  WrappedComponent  = this.props.component;

        if (user && user.authToken && user.permissions === "PERMISSION") {
            return <WrappedComponent {...this.props} />;
        }else if (user && user.authToken && !this.accessControl.hasPermission) {
            return <AccessDeniedComponent></AccessDeniedComponent>
        } else {
            return <Redirect to={{ pathname: '/login', state: { from: this.props.location } }} />;
        }
    }
}

Спасибо за помощь.

Answer 1

Для отключения инструментов реагирования:

в вашем index.html добавить следующий script:

<script>
    window.__REACT_DEVTOOLS_GLOBAL_HOOK__.inject = function () {}
</script>

---

Чтобы отключить инструменты dev-dev:

Когда вы создавали свой объект магазина, вы делали что-то вроде:

const store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk))

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

Ты должен сделать что-то вроде:

let store = null
if (process.env.NODE_ENV !== "production") 
    store = createStore(reducer, window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__(), applyMiddleware(thunk))
else 
    store = createStore(reducer, applyMiddleware(thunk))

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