fix issue with authentication redirect loop

This commit is contained in:
Rick Watson 2019-06-03 21:32:54 +01:00
parent 3157b7d3ef
commit 0da88878d5
4 changed files with 28 additions and 20 deletions

View File

@ -1,4 +1,5 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Redirect, Route, Switch } from 'react-router';
import AppRouting from './AppRouting'; import AppRouting from './AppRouting';
import SnackbarNotification from './components/SnackbarNotification'; import SnackbarNotification from './components/SnackbarNotification';
@ -33,6 +34,9 @@ const theme = createMuiTheme({
// JSS instance // JSS instance
const jss = create(jssPreset()); const jss = create(jssPreset());
// this redirect forces a call to authenticationContext.refresh() which invalidates the JWT if it is invalid.
const unauthorizedRedirect = () => <Redirect to="/" />;
class App extends Component { class App extends Component {
render() { render() {
return ( return (
@ -40,11 +44,14 @@ class App extends Component {
<MuiThemeProvider theme={theme}> <MuiThemeProvider theme={theme}>
<SnackbarNotification> <SnackbarNotification>
<CssBaseline /> <CssBaseline />
<AppRouting /> <Switch>
<Route exact path="/unauthorized" component={unauthorizedRedirect} />
<Route component={AppRouting} />
</Switch>
</SnackbarNotification> </SnackbarNotification>
</MuiThemeProvider> </MuiThemeProvider>
</StylesProvider> </StylesProvider>
) );
} }
} }

View File

@ -47,7 +47,7 @@ export function redirectingAuthorizedFetch(url, params) {
return new Promise(function (resolve, reject) { return new Promise(function (resolve, reject) {
authorizedFetch(url, params).then(response => { authorizedFetch(url, params).then(response => {
if (response.status === 401) { if (response.status === 401) {
history.push("/"); history.push("/unauthorized");
} else { } else {
resolve(response); resolve(response);
} }

View File

@ -89,11 +89,11 @@ class AuthenticationWrapper extends React.Component {
signIn = (accessToken) => { signIn = (accessToken) => {
try { try {
this.setState({ context: { ...this.state.context, user: jwtDecode(accessToken) } });
localStorage.setItem(ACCESS_TOKEN, accessToken); localStorage.setItem(ACCESS_TOKEN, accessToken);
this.setState({ context: { ...this.state.context, user: jwtDecode(accessToken) } });
} catch (err) { } catch (err) {
this.setState({ initialized: true, context: { ...this.state.context, user: undefined } }); this.setState({ initialized: true, context: { ...this.state.context, user: undefined } });
this.props.raiseNotification("Failed to parse JWT " + err.message); throw new Error("Failed to parse JWT " + err.message);
} }
} }

View File

@ -46,7 +46,7 @@ const styles = theme => {
} }
class LoginPage extends Component { class SignInPage extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -82,7 +82,6 @@ class LoginPage extends Component {
} }
}).then(json => { }).then(json => {
authenticationContext.signIn(json.access_token); authenticationContext.signIn(json.access_token);
this.setState({ processing: false });
}) })
.catch(error => { .catch(error => {
this.props.raiseNotification(error.message); this.props.raiseNotification(error.message);
@ -132,4 +131,6 @@ class LoginPage extends Component {
} }
export default withAuthenticationContext(withNotifier(withStyles(styles)(LoginPage))); export default withAuthenticationContext(
withNotifier(withStyles(styles)(SignInPage))
);