Я почти понял это, но это действительно сводит меня с толку, что это продолжалось в течение некоторого времени в том, что кажется простой задачей: скрыть ваш заголовок, если вы не вошли в систему ReactJS. Я пробовал несколько методов, и текущий действительно скрывает мой заголовок от / login, но при принятии учетных данных он не выполняет перепроверку при нажатии / dashboard. Просто загружает / панель инструментов и никакие метрики на месте не проверяются после входа в систему. (Попробовал console.log () по всему коду, чтобы проверить, действительно ли он проверяет путь или проверяет токен, не повезло. Как только я вручную обновлю sh заголовок выходит как следует, но не делает этого в исходном состоянии входа в систему.
import {
BrowserRouter as Router,
Switch,
Route,
Redirect
} from "react-router-dom";
const isLoggedIn = () => {
return localStorage.getItem("TOKEN_KEY") != null;
};
// Protected Route
const SecuredRoute = ({ component: Component, ...rest }) => (
<Route
{...rest}
render={props =>
isLoggedIn() === true ? (
<Component {...props} />
) : (
<Redirect to="/login" />
)
}
/>
);
export default class App extends Component {
componentWillUpdate(nextProps, nextState) {
console.log("update");
}
render() {
// const {pathname} = this.props.location;
return (
<Router>
<Switch>
<div>
{isLoggedIn() && <Header />}
<Route path="/register" component={Register} />
<Route path="/login/:notify?" component={Login} />
<Route path="/password/reset/:token" component={Passwordreset} />
<Route path="/password/forgot" component={Passwordforgot} />
<SecuredRoute path="/dashboard" component={Dashboard} />
</div>
</Switch>
</Router>
);
}
}
И компонент входа в систему.
...
submitForm = async(values, history) => {
values.username = values.username.toLowerCase()
axios
.post('http://localhost:3000/login', values, values)
.then(res => {
if (res.data.result === "success") {
localStorage.setItem("TOKEN_KEY", res.data.token);
swal("Success!", res.data.message, "success").then(value => {
history.push("/dashboard"); });
} else if (res.data.result === "error") {
swal("Error!", res.data.message, "error");
}
})
.catch(error => {
console.log(error);
return swal("Error!", error.message, "error");
});
};
...