Používám "react-router":"^5.1.0", "react-router-dom":"5.1.0". Přihlašovací komponenta se načte, ale objekt historie a umístění se nezmění, vždy zůstanou stejné, po přesměrování nebo pokud načtete jakoukoli jinou komponentu.
import React from "react";
import { ThemeProvider } from "styled-components";
import { theme } from "./theme-default";
import { HashRouter as Router, Route, Switch } from "react-router-dom";
import { GlobalStyle } from "./themes";
import { Security } from '@okta/okta-react';
import { OktaAuth } from "@okta/okta-auth-js";
import { FeeSitePageHeader } from "./app/fee--site-page-header";
import { FeeSitePageFooter } from "./app/fee-site-page-footer";
import Dashboard from "./app/Dashboard/Dashboard";
import Logout from "./app/Logout/Logout";
import Login from "./app/Login/Login";
function App() {
const config = {
issuer: 'https://dev-95779092.okta.com/',
clientId: '****',
redirectUri: window.location.origin + '/?redirect_url=/login/callback'
};
const authClient = new OktaAuth(config);
function restoreOriginalUri() {
console.log(restoreOriginalUri);
};
return (
<ThemeProvider theme={theme}>
<GlobalStyle />
<Router >
<Security oktaAuth={authClient} restoreOriginalUri={restoreOriginalUri}>
<FeeSitePageHeader />
<Switch>
<Route path="/" exact component={Login} />
<Route path="/dashboard" component={Dashboard}/>
<Route path="/logout" component={Logout}/>
</Switch>
<FeeSitePageFooter />
</Security>
</Router>
</ThemeProvider>
);
}
export default App;
Toto je přihlašovací komponenta.
import React from 'react';
import { useOktaAuth } from '@okta/okta-react';
import {TextInput,Field, Checkbox} from "./atom";
import { useLocation } from 'react-router';
import { useHistory } from 'react-router';
import * as Styled from "./Login.styled";
function Login(){
const { authState, oktaAuth } = useOktaAuth();
const location = useLocation();
const history = useHistory();
const [username, setUsername]=React.useState("");
const [password, setPassword]=React.useState("");
console.log(location);
console.log(history);
React.useEffect(() => {
console.log("React UseEffects");
if (history.location.search?.includes('redirect_url=/login/callback')) {
history.push('/#/dashboard');
}
}, [history,location])
function handleFormSubmission(){
oktaAuth.signInWithRedirect();
console.log(oktaAuth,authState);
}
function chgUsername(e:any){
setUsername(e.target.value);
}
function chgPassword(e:any){
setPassword(e.target.value);
}
return(
<Styled.LoginFormWrapper>
<Styled.Title>
</Styled.Title>
<Styled.FieldWrapper>
<Field >
{props => (
<TextInput
name="username"
size={27}
placeholder="username"
value={username}
onChange={chgUsername}
/>
)}
</Field>
</Styled.FieldWrapper>
<Styled.FieldWrapper>
<Field >
{props => (
<TextInput
name="password"
size={27}
placeholder="Password"
type="password"
value={password}
onChange={chgPassword}
/>
)}
</Field>
</Styled.FieldWrapper>
<Styled.RememberMe>
<Checkbox
label="Remember me"
title="Remember me"
/>
</Styled.RememberMe>
<Styled.LoginButton
onClick={handleFormSubmission}
data-testid="login-form-login-btn" >
Log In
</Styled.LoginButton>
</Styled.LoginFormWrapper>
);
}
export default Login;
když se aplikace načte Přihlašovací komponenta je vykreslena, pak se onclick OKTA použije k ověření uživatele a přesměruje na "localhost:8080/?redirect_url=/login/callback", takže v přihlášení (použití efektů) přesměruji na řídicí panel, když je ověření úspěšné. Ale z nějakého důvodu se objekt umístění nemění