С помощью response-маршрутизатора и реагирует на контекст. Я пытаюсь аутентифицировать пользователя в Auth0, а затем перенаправить пользователя на домашнюю страницу при успешном входе в систему. Что мне не хватает в моем маршруте? Я передаю контекст остальной части приложения, оборачивая приложение, используя и передавая методы входа и выхода вниз по дереву. Когда я вызываю метод login () из дочернего компонента, вызывается метод login в контексте, где я устанавливаю состояние {isAuthenticated} в значение true, а затем вызываю Auth.login () из компонента контекста, как показано в прикрепленном коде. .
Я искал документы Auth0 и настроил правильный маршрут обратного вызова на http://localhost:3000/admin/dashboard
Когда я в первый раз нажимаю кнопку входа в систему на странице, появляется соответствующий компонент Auth0, и я могу войти в систему, однако после ввода учетных данных и нажатия кнопки входа в систему меня перенаправляют обратно в компонент {Логин}. Если после этого я снова нажму на кнопку входа в компоненте {Login}, я смогу увидеть страницу, пытающуюся перенаправить на мой домашний маршрут, а затем она вернется ко мне в компонент {Login}.
import auth from '../Auth/Auth'
const AuthContext = React.createContext();
const Auth = new auth();
class AuthProvider extends React.Component {
state = { isAuthenticated: false }
constructor() {
super()
this.login = this.login.bind(this)
this.logout = this.logout.bind(this)
}
auth0Signin() {
Auth.login()
}
login() {
this.setState({ isAuthenticated: true })
this.auth0Signin()
}
logout() {
Auth.logout()
this.setState({ isAuthenticated: false })
}
render() {
return (
<AuthContext.Provider
value={{
isAuthenticated: this.state.isAuthenticated,
login: this.login,
logout: this.logout
}}
>
{this.props.children}
</AuthContext.Provider>
)
}
}
const AuthConsumer = AuthContext.Consumer
export { AuthProvider, AuthConsumer };
import Auth from './Auth/Auth'
import Callback from './views/components/Callback'
import { createBrowserHistory } from "history";
import React from 'react';
import "react-notification-alert/dist/animate.css";
import { Redirect, Route, Router, Switch } from "react-router-dom";
import { AuthConsumer, AuthProvider } from './providers/AuthContext';
import Login from './views/pages/Login';
import Register from './views/pages/Register'
import Dashboard from './layouts/Admin/Admin'
const auth = new Auth()
const hist = createBrowserHistory();
const handleAuthentication = (nextState, replace) => {
if (/access_token|id_token|error/.test(nextState.location.hash)) {
auth.handleAuthentication();
}
}
const ProtectedRoute = ({ component: Component, ...rest }) => (
<AuthConsumer>
{({ isAuthenticated, login, logout}) => (
<Route
render={props =>
isAuthenticated ? <Component login={login} logout={logout} isAuthenticated={isAuthenticated} {...props} /> : <Redirect to='/auth/login' />}
{...rest}
/>
)}
</AuthConsumer>
)
const PublicRoute = ({ component: Component, ...rest }) => (
<AuthConsumer>
{({ isAuthenticated, login, logout}) => (
<Route
render={props =><Component login={login} logout={logout} isAuthenticated={isAuthenticated} {...props} /> }
{...rest}
/>
)}
</AuthConsumer>
)
const App = () => {
return (
<>
<Router history={hist}>
<AuthProvider>
{/* <Header /> */}
<Switch>
<ProtectedRoute path='/admin/dashboard' component={Dashboard} />
<PublicRoute path='/auth/Register' component={Register} />
<PublicRoute path='/auth/Login' component={Login} />
<Route path="/callback" render={(props) => {
handleAuthentication(props);
return <Callback {...props} />
}}/>
<PublicRoute path='/' component={Login} />
</Switch>
{/* <Footer /> */}
</AuthProvider>
</Router>
</>
);
}
export default App;
import auth0 from 'auth0-js';
import { AUTH_CONFIG } from './auth0-variables';
import history from './History';
export default class Auth {
auth0 = new auth0.WebAuth({
domain: AUTH_CONFIG.domain,
callbackUrl: AUTH_CONFIG.callbackUrl,
clientID: AUTH_CONFIG.clientId,
redirectUri: AUTH_CONFIG.redirectUri,
responseType: 'token id_token',
scope: 'openid'
});
login() {
this.auth0.authorize();
}
constructor() {
this.login = this.login.bind(this);
this.logout = this.logout.bind(this);
this.handleAuthentication = this.handleAuthentication.bind(this);
this.isAuthenticated = this.isAuthenticated.bind(this);
this.getAccessToken = this.getAccessToken.bind(this);
this.getIdToken = this.getIdToken.bind(this);
this.renewSession = this.renewSession.bind(this);
}
handleAuthentication() {
this.auth0.parseHash((err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
} else if (err) {
history.replace('/admin/dashboard');
console.log(err);
alert(`Error: ${err.error}. Check the console for further details.`);
}
});
}
getAccessToken() {
return this.accessToken;
}
getIdToken() {
return this.idToken;
}
setSession(authResult) {
// Set isLoggedIn flag in localStorage
localStorage.setItem('isLoggedIn', 'true');
// Set the time that the Access Token will expire at
let expiresAt = (authResult.expiresIn * 1000) + new Date().getTime();
this.accessToken = authResult.accessToken;
this.idToken = authResult.idToken;
this.expiresAt = expiresAt;
// navigate to the home route
history.replace('/home');
}
renewSession() {
this.auth0.checkSession({}, (err, authResult) => {
if (authResult && authResult.accessToken && authResult.idToken) {
this.setSession(authResult);
} else if (err) {
this.logout();
console.log(err);
alert(`Could not get a new token (${err.error}: ${err.error_description}).`);
}
});
}
logout() {
// Remove tokens and expiry time
this.accessToken = null;
this.idToken = null;
this.expiresAt = 0;
// Remove isLoggedIn flag from localStorage
localStorage.removeItem('isLoggedIn');
this.auth0.logout({
returnTo: window.location.origin
});
// navigate to the home route
history.replace('/auth/login');
}
isAuthenticated() {
// Check whether the current time is past the
// access token's expiry time
let expiresAt = this.expiresAt;
return new Date().getTime() < expiresAt;
}
}