Come si fa a mantenere l'accesso dell'utente utilizzando archiviando i token in localstorage?
Sto seguendo questo tutorial per implementare l'autenticazione: https://medium.com/technest/implement-user-auth-in-a-django-react-app-with-knox-fc56cdc9211c
Quando l'utente va all'URL di base della mia app, lo reindirizza a una pagina di accesso se non è autenticato. Questo è l'aspetto del mio app.js:
class App extends Component {
componentDidMount() {
store.dispatch(loadUser());
}
render() {
return (
<Provider store={store}>
<Router>
<Sidebar />
<Switch>
<PrivateRoute exact path='/' component={Dashboard} />
<Route exact path='/feed' component={Feed} />
<Route exact path='/register' component={RegisterForm} />
<Route exact path='/login' component={LoginForm} />
</Switch>
</Router>
</Provider>
);
}
}
export default App;
Il mio PrivateRoute.js:
const PrivateRoute = ({ component: Component, auth, ...rest }) => (
<Route
{...rest}
render={props => {
if (auth.isLoading) {
return <div>Loading...</div>;
} else if (!auth.isAuthenticated) {
return <Redirect to='/login' />;
} else {
return <Component {...props} />;
}
}}
/>
);
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps)(PrivateRoute);
Qui, l'autenticazione funziona correttamente e si collega correttamente al mio componente Dashboard.js. All'interno del mio Dashboard.js, sto solo eseguendo il rendering di un altro componente che ho, chiamato Profile.js, che mostra i profili degli utenti.
Nel primo codice che ho mostrato (App.js), al di fuori dei tag, ho il mio componente Sidebar.js che viene sempre visualizzato indipendentemente dal fatto che l'utente abbia effettuato l'accesso.
class Sidebar extends Component {
// Button event to switch to feed page.
render() {
const { user, isAuthenticated } = this.props.auth;
return (
<>
<div id="sidebar">
<a onClick={this.props.logout} id="logout_btn">
<span className="fa fa-lock"></span></a>
<NavLink id="profile_btn" to="/">
<span className="fa fa-user-circle"></span></NavLink>
<NavLink id="feed_btn" to="/feed">
<span className="fa fa-address-book"></span></NavLink>
</div>
<div id="brand">
<h1>Cook Simple</h1>
<p id="username-goes-here"></p>
<a id="add_btn" href="{% url 'recipe:recipe_new' %}">
<span class="fa fa-plus"></span> </a>
</div>
</>
);
}
}
const mapStateToProps = state => ({
auth: state.auth
});
export default connect(mapStateToProps, { logout })(Sidebar);
Su questa barra laterale, ho un pulsante che collega al suddetto profilo e un altro pulsante che collega a un altro componente chiamato Feed. Fare clic sul pulsante Profilo funziona correttamente: va al mio URL di base, che va a PrivateRoute, vede che l'utente è autenticato e visualizza il profilo. Tuttavia, fare clic sul pulsante per Feed mostra che il prop "auth" non è definito. Il codice per Feed:
class Feed extends Component {
componentDidMount() {
this.props.getAllRecipes();
}
setGrid() {
try {
document.getElementById("grid-container-PROFILE").id = "grid-container-FEED"
console.log("Feed Loaded")
}
catch {
console.log("Feed Already Loaded")
}
}
render() {
this.setGrid()
return (
<>
<div id="brand">
<h1>Title Goes Here</h1>
</div>
<div className="title-FEED" id="recipecards-FEED">
<div id="recipecard-container-FEED">
<RecipeList />
</div>
</div>
</>
);
}
}
const mapStateToProps = (state) => {
return {
all_recipes: state.all_recipes,
auth: state.auth
}
}
const mapDispatchToProps = () => {
return {
getAllRecipes,
}
}
export default connect(mapStateToProps, mapDispatchToProps())(Feed)
All'interno di questo componente, vorrei poter accedere a auth.user per visualizzare alcuni dati all'interno dell'oggetto utente. Tuttavia, sembra che l'autenticazione non sia definita.
Le azioni e i riduttori che sto utilizzando per l'autenticazione sono gli stessi del tutorial collegato. Ecco i loro riassunti:
azioni di autenticazione: https://gist.github.com/kjmczk/2c287f1d615824c627580bd2a8067fcb#file-auth-js
riduttori di autenticazione: https://gist.github.com/kjmczk/64f302546e4cd38ff922cf5d59192b8e#file-auth-js
Risposte
Sembra che tu abbia un errore di sintassi. Prova a sostituire:
connect(mapStateToProps, mapDispatchToProps())(Feed);
Con:
connect(mapStateToProps, mapDispatchToProps)(Feed);
Eliminando le parentesi.
Ho trovato il problema. Quando guardavo i miei oggetti di scena con React DevTools, i componenti sembravano tutti avere il prop di autenticazione , ma ogni volta che ho provato a usarlo effettivamente, ho ricevuto un errore. Ho risolto il problema accedendo al prop solo dopo aver verificato che l'utente sia autenticato.