Trello clone with Phoenix and React (第六章节)

这篇文章属于基于Phoenix Framework 和React的Trello系列

前端用户登录

后端的作用是处理登录请求，让我们转移到前端，看看如何建立和发送这些请求，以及如何使用返回数据，并允许访问私有路由。

路由文件

继续之前，让我们再次看看React路由文件：

  1. // web/static/js/routes/index.js
  3. import { IndexRoute, Route }        from 'react-router';
  4. import React                        from 'react';
  5. import MainLayout                   from '../layouts/main';
  6. import AuthenticatedContainer       from '../containers/authenticated';
  7. import HomeIndexView                from '../views/home';
  8. import RegistrationsNew             from '../views/registrations/new';
  9. import SessionsNew                  from '../views/sessions/new';
  10. import BoardsShowView               from '../views/boards/show';
  11. import CardsShowView               from '../views/cards/show';
  13. export default (
  14.   <Route component={MainLayout}>
  15.     <Route path="/sign_up" component={RegistrationsNew} />
  16.     <Route path="/sign_in" component={SessionsNew} />
  18.     <Route path="/" component={AuthenticatedContainer}>
  19.       <IndexRoute component={HomeIndexView} />
  21.       <Route path="/boards/:id" component={BoardsShowView}>
  22.         <Route path="cards/:id" component={CardsShowView}/>
  23.       </Route>
  24.     </Route>
  25.   </Route>
  26. );

在第四章中，AuthenticatedContainer是为了防止未授权用户访问卡片内容，除非用户合法登录并返回有 jwttoken。

视图组件

现在我们需要创建SessionsNew组件，用于用户登录时需要呈现的表单：

  1. // web/static/js/views/sessions/new.js
  2. import React, {PropTypes}   from 'react';
  3. import { connect }          from 'react-redux';
  4. import { Link }             from 'react-router';
  6. import { setDocumentTitle } from '../../utils';
  7. import Actions              from '../../actions/sessions';
  9. class SessionsNew extends React.Component {
  10.   componentDidMount() {
  11.     setDocumentTitle('Sign in');
  12.   }
  14.   _handleSubmit(e) {
  15.     e.preventDefault();
  17.     const { email, password } = this.refs;
  18.     const { dispatch } = this.props;
  20.     dispatch(Actions.signIn(email.value, password.value));
  21.   }
  23.   _renderError() {
  24.     const { error } = this.props;
  26.     if (!error) return false;
  28.     return (
  29.       <div className="error">
  30.         {error}
  31.       </div>
  32.     );
  33.   }
  35.   render() {
  36.     return (
  37.       <div className='view-container sessions new'>
  38.         <main>
  39.           <header>
  40.             <div className="logo" />
  41.           </header>
  42.           <form onSubmit={::this._handleSubmit}>
  43.             {::this._renderError()}
  44.             <div className="field">
  45.               <input ref="email" type="Email" placeholder="Email" required="true" defaultValue="john@phoenix-trello.com"/>
  46.             </div>
  47.             <div className="field">
  48.               <input ref="password" type="password" placeholder="Password" required="true" defaultValue="12345678"/>
  49.             </div>
  50.             <button type="submit">Sign in</button>
  51.           </form>
  52.           <Link to="/sign_up">Create new account</Link>
  53.         </main>
  54.       </div>
  55.     );
  56.   }
  57. }
  59. const mapStateToProps = (state) => (
  60.   state.session
  61. );
  63. export default connect(mapStateToProps)(SessionsNew);

基本功能是呈现表单和当表单确认时候调用signIn动作creator。同时，也讲连接store，获取通过session reducer更新的store，便于显示用户验证错误。

action creator

下面是用户交互，让我们创建sessions相关的action creator:

  1. // web/static/js/actions/sessions.js
  3. import { routeActions }                   from 'redux-simple-router';
  4. import Constants                          from '../constants';
  5. import { Socket }                         from '../phoenix';
  6. import { httpGet, httpPost, httpDelete }  from '../utils';
  8. function setCurrentUser(dispatch, user) {
  9.   dispatch({
  10.     type: Constants.CURRENT_USER,
  11.     currentUser: user,
  12.   });
  14.   // ...
  15. };
  17. const Actions = {
  18.   signIn: (email, password) => {
  19.     return dispatch => {
  20.       const data = {
  21.         session: {
  22.           email: email,
  23.           password: password,
  24.         },
  25.       };
  27.       httpPost('/api/v1/sessions', data)
  28.       .then((data) => {
  29.         localStorage.setItem('phoenixAuthToken', data.jwt);
  30.         setCurrentUser(dispatch, data.user);
  31.         dispatch(routeActions.push('/'));
  32.       })
  33.       .catch((error) => {
  34.         error.response.json()
  35.         .then((errorJSON) => {
  36.           dispatch({
  37.             type: Constants.SESSIONS_ERROR,
  38.             error: errorJSON.error,
  39.           });
  40.         });
  41.       });
  42.     };
  43.   },
  45.   // ...
  46. };
  48. export default Actions;

signIn功能，将产生一个POST请求，参数包括email和用户提供的password。如果后端验证成功，将存储返回的jwttoken到localStorage，并发送currentUser JSON到store。如果出现任何用户验证错误，都将发送错误反馈到用户登录表单。

The reducer

让我们创建 session reducer:

  1. // web/static/js/reducers/session.js
  3. import Constants from '../constants';
  5. const initialState = {
  6.   currentUser: null,
  7.   error: null,
  8. };
  10. export default function reducer(state = initialState, action = {}) {
  11.   switch (action.type) {
  12.     case Constants.CURRENT_USER:
  13.       return { ...state, currentUser: action.currentUser, error: null };
  15.     case Constants.SESSIONS_ERROR:
  16.       return { ...state, error: action.error };
  18.     default:
  19.       return state;
  20.   }
  21. }

这里我们就不说那么多了。很显然，我们需要修改authenticatedcontainer，就可以获取新state:

验证container

  1. // web/static/js/containers/authenticated.js
  3. import React            from 'react';
  4. import { connect }      from 'react-redux';
  5. import Actions          from '../actions/sessions';
  6. import { routeActions } from 'redux-simple-router';
  7. import Header           from '../layouts/header';
  9. class AuthenticatedContainer extends React.Component {
  10.   componentDidMount() {
  11.     const { dispatch, currentUser } = this.props;
  12.     const phoenixAuthToken = localStorage.getItem('phoenixAuthToken');
  14.     if (phoenixAuthToken && !currentUser) {
  15.       dispatch(Actions.currentUser());
  16.     } else if (!phoenixAuthToken) {
  17.       dispatch(routeActions.push('/sign_in'));
  18.     }
  19.   }
  21.   render() {
  22.     const { currentUser, dispatch } = this.props;
  24.     if (!currentUser) return false;
  26.     return (
  27.       <div className="application-container">
  28.         <Header
  29.           currentUser={currentUser}
  30.           dispatch={dispatch}/>
  32.         <div className="main-container">
  33.           {this.props.children}
  34.         </div>
  35.       </div>
  36.     );
  37.   }
  38. }
  40. const mapStateToProps = (state) => ({
  41.   currentUser: state.session.currentUser,
  42. });
  44. export default connect(mapStateToProps)(AuthenticatedContainer);

当这个组件mounte后，如果有验证token，在store中却不是currentUser，会调用currentUser动作creator并从后端获取用户数据。让我们添加这部分代码：

  1. // web/static/js/actions/sessions.js
  2. // ...
  4. const Actions = {
  5.   // ...
  7.   currentUser: () => {
  8.     return dispatch => {
  9.       httpGet('/api/v1/current_user')
  10.       .then(function(data) {
  11.         setCurrentUser(dispatch, data);
  12.       })
  13.       .catch(function(error) {
  14.         console.log(error);
  15.         dispatch(routeActions.push('/sign_in'));
  16.       });
  17.     };
  18.   },
  20.   // ...
  21. }
  23. // ...

如果用户重新加载浏览器或者是没有之前注销再次访问根URL，数据将会覆盖。根据我们前面的步骤，用户登录后，将在state中设置currentUser，该组件将呈现正常显示标题组件及其嵌套的子路由。

标题组件

这个组件将呈现用户图像和名字，以及卡片链接和注销按钮。

  1. // web/static/js/layouts/header.js
  3. import React          from 'react';
  4. import { Link }       from 'react-router';
  5. import Actions        from '../actions/sessions';
  6. import ReactGravatar  from 'react-gravatar';
  8. export default class Header extends React.Component {
  9.   constructor() {
  10.     super();
  11.   }
  13.   _renderCurrentUser() {
  14.     const { currentUser } = this.props;
  16.     if (!currentUser) {
  17.       return false;
  18.     }
  20.     const fullName = [currentUser.first_name, currentUser.last_name].join(' ');
  22.     return (
  23.       <a className="current-user">
  24.         <ReactGravatar email={currentUser.email} https /> {fullName}
  25.       </a>
  26.     );
  27.   }
  29.   _renderSignOutLink() {
  30.     if (!this.props.currentUser) {
  31.       return false;
  32.     }
  34.     return (
  35.       <a href="#" onClick={::this._handleSignOutClick}><i className="fa fa-sign-out"/> Sign out</a>
  36.     );
  37.   }
  39.   _handleSignOutClick(e) {
  40.     e.preventDefault();
  42.     this.props.dispatch(Actions.signOut());
  43.   }
  45.   render() {
  46.     return (
  47.       <header className="main-header">
  48.         <nav>
  49.           <ul>
  50.             <li>
  51.               <Link to="/"><i className="fa fa-columns"/> Boards</Link>
  52.             </li>
  53.           </ul>
  54.         </nav>
  55.         <Link to='/'>
  56.           <span className='logo'/>
  57.         </Link>
  58.         <nav className="right">
  59.           <ul>
  60.             <li>
  61.               {this._renderCurrentUser()}
  62.             </li>
  63.             <li>
  64.               {this._renderSignOutLink()}
  65.             </li>
  66.           </ul>
  67.         </nav>
  68.       </header>
  69.     );
  70.   }
  71. }

当用户用户点击注销按钮，将调用session动作creator中的signOut方法。让我们添加这些代码：

  1. // web/static/js/actions/sessions.js
  2. // ...
  4. const Actions = {
  5.   // ...
  7.   signOut: () => {
  8.     return dispatch => {
  9.       httpDelete('/api/v1/sessions')
  10.       .then((data) => {
  11.         localStorage.removeItem('phoenixAuthToken');
  13.         dispatch({
  14.           type: Constants.USER_SIGNED_OUT,
  15.         });
  17.         dispatch(routeActions.push('/sign_in'));
  18.       })
  19.       .catch(function(error) {
  20.         console.log(error);
  21.       });
  22.     };
  23.   },
  25.   // ...
  26. }
  28. // ...

它将发送DELETE请求到后端，成功后将从localStorage中移除phoenixAuthToken并调用USER_SIGNED_OUT动作，重置先前session reducer定义的state中的currentUser：

  1. // web/static/js/reducers/session.js
  3. import Constants from '../constants';
  5. const initialState = {
  6.   currentUser: null,
  7.   error: null,
  8. };
  10. export default function reducer(state = initialState, action = {}) {
  11.   switch (action.type) {
  12.     // ...
  14.     case Constants.USER_SIGNED_OUT:
  15.       return initialState;
  17.     // ...
  18.   }
  19. }

另外

尽管我们已经完成了用户登录过程，我们还有一个关键功能还没有实现，这也是我们编写的所有功能的核心：用户socket和channels。这个非常重要，我特别留了一章单独讲解它，下一章会仔细这个，UserSocket是什么，以及channels如何实现前后端双向连接，实时显示用户改变。同样，别忘记查看运行演示和下载最终的源代码：

演示 源代码