diff --git a/package.json b/package.json index 7dbba9c..bb7d450 100644 --- a/package.json +++ b/package.json @@ -14,12 +14,14 @@ "bootstrap": "^3.3.6", "font-awesome": "^4.7.0", "jquery": "^2.2.4", + "jwt-decode": "^2.1.0", "react": "^15.3.2", "react-dom": "^15.3.2", "react-redux": "^4.4.6", "react-router": "^3.0.0", "react-router-redux": "^4.0.7", "redux": "^3.6.0", + "redux-auth-wrapper": "^0.9.0", "redux-logger": "^2.7.4", "redux-promise-middleware": "^4.1.0", "redux-thunk": "^2.1.0" diff --git a/src/public/js/app.js b/src/public/js/app.js index aa9d6e4..17d76b6 100644 --- a/src/public/js/app.js +++ b/src/public/js/app.js @@ -1,20 +1,29 @@ import React from 'react' import ReactDOM from 'react-dom' -import { Router, Route, IndexRoute, Link, hashHistory } from 'react-router' -import { Provider } from 'react-redux' +import { bindActionCreators } from 'redux' +import { Provider, connect } from 'react-redux' +import { Router, Route, IndexRoute, IndexRedirect, Link, hashHistory } from 'react-router' +import { routerActions } from 'react-router-redux' +import { UserAuthWrapper } from 'redux-auth-wrapper' +// Root reducer import rootReducer from './reducers/index' + +// Action creators +import * as actionCreators from './actions/actionCreators' + +// Store import store, { history } from './store' +// Components import NavBar from './components/navbar.jsx' import MovieList from './components/movie-list.jsx' import UserLoginForm from './components/user-login.jsx' -import { bindActionCreators } from 'redux' -import { connect } from 'react-redux' -import * as actionCreators from './actions/actionCreators' - class Main extends React.Component { + componentWillMount() { + this.props.isUserLoggedIn() + } render() { return (
@@ -44,13 +53,25 @@ function mapDispatchToProps(dispatch) { const App = connect(mapStateToProps, mapDispatchToProps)(Main); +// Redirects to /login by default +const UserIsAuthenticated = UserAuthWrapper({ + authSelector: state => state.userStore, + redirectAction: routerActions.replace, + wrapperDisplayName: 'UserIsAuthenticated', + predicate: user => user.isLogged, + failureRedirectPath: '/users/login', +}) +const Authenticated = UserIsAuthenticated((props) => props.children); + ReactDOM.render(( + - - + + + diff --git a/src/public/js/components/navbar.jsx b/src/public/js/components/navbar.jsx index d6ce818..8ddd4b2 100644 --- a/src/public/js/components/navbar.jsx +++ b/src/public/js/components/navbar.jsx @@ -4,9 +4,6 @@ import { store } from '../store' import { isUserLoggedIn } from '../actions/actionCreators' export default class NavBar extends React.Component { - componentDidMount() { - this.props.isUserLoggedIn() - } render() { const username = this.props.userStore.username; const isLoggedIn = username !== "" ? true : false; diff --git a/src/public/js/reducers/users.js b/src/public/js/reducers/users.js index 899baca..d718533 100644 --- a/src/public/js/reducers/users.js +++ b/src/public/js/reducers/users.js @@ -5,6 +5,7 @@ const defaultState = { userLoading: false, username: "", isAdmin: false, + isLogged: false, }; // This actions are generated from the promise middleware @@ -22,7 +23,7 @@ export default function userStore(state = defaultState, action) { return updateFromToken(state, action.payload.data.token) case IS_USER_LOGGED_IN: let localToken = localStorage.getItem('token'); - if (localToken === "") { + if (!localToken || localToken === "") { return state; } return updateFromToken(state, localToken) @@ -41,6 +42,7 @@ function updateFromToken(state, token) { localStorage.setItem('token', token); return Object.assign({}, state, { userLoading: false, + isLogged: true, isAdmin: decodedToken.isAdmin, username: decodedToken.username, }) diff --git a/src/public/js/store.js b/src/public/js/store.js index 9181e6b..930f969 100644 --- a/src/public/js/store.js +++ b/src/public/js/store.js @@ -3,11 +3,14 @@ import { syncHistoryWithStore } from 'react-router-redux' import { hashHistory } from 'react-router' import thunk from 'redux-thunk' import promise from 'redux-promise-middleware' +import { routerMiddleware } from 'react-router-redux' // Import the root reducer import rootReducer from './reducers/index' -const middlewares = [promise(), thunk]; +const routingMiddleware = routerMiddleware(hashHistory) + +const middlewares = [promise(), thunk, routingMiddleware]; // Only use in development mode (set in webpack) if (process.env.NODE_ENV === `development`) { diff --git a/yarn.lock b/yarn.lock index 10ac9b8..d2ddea0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1581,7 +1581,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0: +hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0, hoist-non-react-statics@1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" @@ -1899,6 +1899,10 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.3.6" +jwt-decode: + version "2.1.0" + resolved "https://registry.yarnpkg.com/jwt-decode/-/jwt-decode-2.1.0.tgz#d3079cef1689d82d56bbb7aedcfea28b12f0e36a" + kind-of@^3.0.2: version "3.0.4" resolved "https://registry.yarnpkg.com/kind-of/-/kind-of-3.0.4.tgz#7b8ecf18a4e17f8269d73b501c9f232c96887a74" @@ -2024,7 +2028,7 @@ lodash.isarray@^3.0.0: version "3.0.4" resolved "https://registry.yarnpkg.com/lodash.isarray/-/lodash.isarray-3.0.4.tgz#79e4eb88c36a8122af86f844aa9bcd851b5fbb55" -lodash.isempty@^4.2.1: +lodash.isempty@^4.2.1, lodash.isempty@4.4.0: version "4.4.0" resolved "https://registry.yarnpkg.com/lodash.isempty/-/lodash.isempty-4.4.0.tgz#6f86cbedd8be4ec987be9aaf33c9684db1b31e7e" @@ -2699,6 +2703,13 @@ redux: loose-envify "^1.1.0" symbol-observable "^1.0.2" +redux-auth-wrapper: + version "0.9.0" + resolved "https://registry.yarnpkg.com/redux-auth-wrapper/-/redux-auth-wrapper-0.9.0.tgz#4456a73f44ea8b1e996906127feffac890ba6913" + dependencies: + hoist-non-react-statics "1.2.0" + lodash.isempty "4.4.0" + redux-logger: version "2.7.4" resolved "https://registry.yarnpkg.com/redux-logger/-/redux-logger-2.7.4.tgz#891e5d29e7f111d08b5781a237b9965b5858c7f8"