После перенаправления React перерисовывается и отправляется обратно в кешированный логин IE11
Я изо всех сил пытаюсь найти быстрое решение моей проблемы, потому что клиенты жалуются на то, что Сайт не может быть создан в IE . Я сделал небольшое исследование, и я столкнулся с этим react-app-polyfill/ie11
, Я вставил его как точку входа на мой src/index.js
Это сработало, я увидел, что мой проект (только имя входа) работает на IE 11, но после входа он снова перенаправляется обратно на страницу входа. Ошибка, которую IE выдает обратно: DOM7011 : The code on this page disabled back and forward caching.
Unhandled promise rejection TypeError: Unable to get property 'data' of undefined or null reference
Через некоторое время я тоже наткнулся на это: https://reactjs.org/docs/javascript-environment-requirements.html
Новые требования среды JavaScript. В основном они предлагают включить в качестве точки входа на вашем index.js
это import 'core-js/es/map';
import 'core-js/es/set';
До сих пор я понятия не имею, что происходит, но приложение не работает должным образом в IE . Может кто-нибудь дать мне совет, что делать?
ОБНОВЛЕНО Login.js
export default class Login extends Component {
constructor(props) {
super(props);
this.state = {
translations: EN_TRANSLATIONS,
clientNumber: "",
password: "",
redirectToReferrer: '',
loginErrorMessage: "",
lockedUntilDate: ''
};
}
async componentWillMount() {
let tenant = window.location.hostname
axios.post(SERVER_URL + '/api/user/page', {
tenant: tenant
})
.then(response => {
localStorage.setItem('page', JSON.stringify(response.data.branding));
localStorage.setItem('tenant', tenant);
this.setState({
branding: response.data.branding,
tenant: tenant,
pageReady: true
});
});
login = () => {
axios.post(SERVER_URL + '/api/user/access', {
tenant: this.state.tenant,
customerNumber: parseInt(this.state.clientNumber),
password: sha1(this.state.password + FE_SALT)
})
.then(response => {
localStorage.setItem('token', response.data.token);
localStorage.setItem('access', JSON.stringify(response.data.branding));
this.setState({
branding: response.data.branding,
accessReady: true
});
if (this.state.accessReady) {
if (response.data.passwordValidity >= 0) {
Auth.authenticate(response => {
this.setState({ redirectToReferrer: 'dashboard' })
});
} else {
Auth.authenticate(response => {
this.setState({ redirectToReferrer: 'changePassword' })
});
}
}
})
``
index.js
import 'react-app-polyfill/ie9';
import 'react-app-polyfill/ie11';
import 'react-app-polyfill/jsdom';
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { BrowserRouter } from "react-router-dom";
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById("root")
);
Также я отметил, что не могу импортировать 'react-app-polyfill/stable'
Я думаю, что это должно работать, но я не уверен.
ОБНОВЛЕНИЕ Я удалил node_modules
и снова установлен react-app-polyfill
, Теперь 'react-app-polyfill/stable'
признается, но я столкнулся с другой ошибкой. SCRIPT438: Object doesn't support property or method 'repeat'
... этот IE сводит меня с ума...
ОБНОВЛЕНИЕ Окей, так что я смог удалить свои личные маршруты и сделать каждый маршрут после входа в систему видимым <Route/>
, Если я жестко закодирую путь URL-адреса и отключаю защиту, я могу получить доступ к своей странице панели инструментов. Так что это заставляет меня думать, что проблема исходит от <Redirect/>
составная часть. Потому что он единственный, кто стоит между логином и приборной панелью. Любое предположение, почему этот конфликт между IE
а также <Redirect/>
???