From 283f60d0fa7480e0bdbc8c9bd8cc04ddfd44b3a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysiek=20Gre=C5=84?= Date: Thu, 20 Apr 2017 15:51:14 +0200 Subject: [PATCH 1/2] added auth to routes --- client/package.json | 1 + client/src/components/App.js | 11 ++++++++--- client/src/components/Routes.js | 27 ++++++++++++++++++--------- 3 files changed, 27 insertions(+), 12 deletions(-) diff --git a/client/package.json b/client/package.json index a4405f7..130d7fe 100644 --- a/client/package.json +++ b/client/package.json @@ -24,6 +24,7 @@ "react-router": "~3.0.2", "react-router-redux": "^4.0.8", "redux": "^3.6.0", + "redux-auth-wrapper": "^1.0.0", "redux-form": "^6.6.1", "redux-thunk": "^2.2.0" }, diff --git a/client/src/components/App.js b/client/src/components/App.js index eb779a1..e9655dc 100644 --- a/client/src/components/App.js +++ b/client/src/components/App.js @@ -1,6 +1,7 @@ import React, { Component } from 'react'; import { Link } from 'react-router'; import { connect } from 'react-redux'; +import { isEmpty } from 'lodash'; import { getUser, logout } from '../store/api'; @@ -8,14 +9,17 @@ export class App extends Component { logout = () => this.props.logout(this.props.user); render() { + const { user } = this.props; return (

Posts |  Categories |  Users |  - Log in |  - Logout + { isEmpty(user) ? + Log in + : + Logout }

{this.props.children} @@ -28,8 +32,9 @@ export const mapStateToProps = (state) => ({ user: getUser(state), }); -export const mapDispatchToProps = (dispatch) => ({ +export const mapDispatchToProps = (dispatch, params) => ({ logout: (payload) => dispatch(logout('auth', payload)), + redirectToIndex: () => dispatch(push('/'), params), }); export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/client/src/components/Routes.js b/client/src/components/Routes.js index eea35a0..14d36b0 100644 --- a/client/src/components/Routes.js +++ b/client/src/components/Routes.js @@ -1,5 +1,7 @@ import React, { PureComponent, PropTypes } from 'react'; -import { Router, Route, IndexRoute } from 'react-router'; +import { Router, Route, IndexRoute, browserHistory } from 'react-router'; +import { UserAuthWrapper } from 'redux-auth-wrapper'; +import { routerActions, replace } from 'react-router-redux'; import App from './App'; import { PostList, PostEdit } from './Posts'; @@ -7,6 +9,13 @@ import { CategoryList, CategoryEdit } from './Categories'; import { UserList, UserEdit } from './Users'; import { Login } from './Auth'; +const UserIsAuthenticated = UserAuthWrapper({ + authSelector: state => state.api.user, // how to get the user state + redirectAction: routerActions.replace, + wrapperDisplayName: 'UserIsAuthenticated' // a nice name for this auth check +}) + + export default class Routes extends PureComponent { static propTypes = { history: PropTypes.object, @@ -18,14 +27,14 @@ export default class Routes extends PureComponent { return ( - - - - - - - - + + + + + + + + From 8cd1003868a5472c9b17d292fc4ba06f36d2da6b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysiek=20Gre=C5=84?= Date: Thu, 20 Apr 2017 16:20:10 +0200 Subject: [PATCH 2/2] custom redirect after login --- client/src/components/App.js | 17 ++++++++++------- client/src/components/Auth/Login.js | 9 +++++---- client/src/components/Routes.js | 29 ++++++++++++----------------- 3 files changed, 27 insertions(+), 28 deletions(-) diff --git a/client/src/components/App.js b/client/src/components/App.js index e9655dc..9e6b23e 100644 --- a/client/src/components/App.js +++ b/client/src/components/App.js @@ -6,7 +6,10 @@ import { isEmpty } from 'lodash'; import { getUser, logout } from '../store/api'; export class App extends Component { - logout = () => this.props.logout(this.props.user); + logout = (e) => { + e.preventDefault(); + this.props.logout(this.props.user); + } render() { const { user } = this.props; @@ -16,10 +19,11 @@ export class App extends Component { Posts |  Categories |  Users |  - { isEmpty(user) ? - Log in - : - Logout } + { + isEmpty(user) + ? Log in + : Logout + }

{this.props.children} @@ -32,9 +36,8 @@ export const mapStateToProps = (state) => ({ user: getUser(state), }); -export const mapDispatchToProps = (dispatch, params) => ({ +export const mapDispatchToProps = (dispatch) => ({ logout: (payload) => dispatch(logout('auth', payload)), - redirectToIndex: () => dispatch(push('/'), params), }); export default connect(mapStateToProps, mapDispatchToProps)(App); diff --git a/client/src/components/Auth/Login.js b/client/src/components/Auth/Login.js index 8d4b631..c5cf826 100644 --- a/client/src/components/Auth/Login.js +++ b/client/src/components/Auth/Login.js @@ -1,11 +1,12 @@ import React, { Component, PropTypes } from 'react'; import { connect } from 'react-redux'; +import { replace } from 'react-router-redux'; import LoginForm from './LoginForm'; import { login } from '../../store/api'; export class Login extends Component { - onSubmit = (values) => this.props.login(values); + onSubmit = (values) => this.props.login(values).then(this.props.redirect); render() { return ( @@ -16,11 +17,11 @@ export class Login extends Component { } }; -export const mapStateToProps = (state) => ({ -}); +export const mapStateToProps = (state) => ({}); -export const mapDispatchToProps = (dispatch) => ({ +export const mapDispatchToProps = (dispatch, props) => ({ login: (payload) => dispatch(login('auth', payload)), + redirect: () => dispatch(replace(props.location.query.redirect || '/')), }); export default connect(mapStateToProps, mapDispatchToProps)(Login); diff --git a/client/src/components/Routes.js b/client/src/components/Routes.js index 14d36b0..3fc40b3 100644 --- a/client/src/components/Routes.js +++ b/client/src/components/Routes.js @@ -1,20 +1,15 @@ import React, { PureComponent, PropTypes } from 'react'; import { Router, Route, IndexRoute, browserHistory } from 'react-router'; import { UserAuthWrapper } from 'redux-auth-wrapper'; -import { routerActions, replace } from 'react-router-redux'; +import { getUser } from '../store/api'; import App from './App'; import { PostList, PostEdit } from './Posts'; import { CategoryList, CategoryEdit } from './Categories'; import { UserList, UserEdit } from './Users'; import { Login } from './Auth'; -const UserIsAuthenticated = UserAuthWrapper({ - authSelector: state => state.api.user, // how to get the user state - redirectAction: routerActions.replace, - wrapperDisplayName: 'UserIsAuthenticated' // a nice name for this auth check -}) - +const UserIsAuthenticated = UserAuthWrapper({ authSelector: getUser }); export default class Routes extends PureComponent { static propTypes = { @@ -26,17 +21,17 @@ export default class Routes extends PureComponent { return ( - - - - - - - - - - + + + + + + + + + + ); }