zhulinpinyu (竹林品雨)

Let’ s Build |> 使用 Elixir，Phoenix 和 React 打造克隆版的 Slack (part 3 — Frontend Authentication)

zhulinpinyu — Mon, 31 Jul 2017 16:18:10 +0800

Live Demo---GitHub Repo

上一篇博文中我们已经实现用户认证相关的 API 接口，接下来我们添加前端的登录注册界面并实现用户认证。

关于样式用法的备注：在 React 项目中，我喜欢作用域在组件内的样式，也就是将 CSS 定义在组件所属的 js 文件中，并使用行内样式。我将全局 CSS（比如 Twitter Bootstrap）只用作基本的页面元素样式。

在 JS 文件中有许多使用 CSS 的方法，比如 CSS Modules, Radium, Styled-Components或者直接使用 JavaScript 对象。在这个项目中我们采用Aphrodite

这次提交，可以看到我们是怎么为项目配置全局样式的。下载最新版的bootstrap和font-awesome，创建 index.css 文件写入一些基本样式。并将其全部 import 到我们项目的入口文件中。

我们需要在 App 组件中添加两个新的路由，一个是登录/login,另一个是注册/signup

sling/web/src/containers/App/index.js

// @flow
import React, { Component } from 'react';
import { BrowserRouter, Match, Miss } from 'react-router';
import Home from '../Home';
import NotFound from '../../components/NotFound';
import Login from '../Login';
import Signup from '../Signup';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div style={{ display: 'flex', flex: '1' }}>
          <Match exactly pattern="/" component={Home} />
          <Match pattern="/login" component={Login} />
          <Match pattern="/signup" component={Signup} />
          <Miss component={NotFound} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

sling/web/src/containers/Signup/index.js

// @flow
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { signup } from '../../actions/session';
import SignupForm from '../../components/SignupForm';
import Navbar from '../../components/Navbar';

type Props = {
  signup: () => void,
}

class Signup extends Component {
  static contextTypes = {
    router: PropTypes.object,
  }

  props: Props

  handleSignup = data => this.props.signup(data, this.context.router);

  render() {
    return (
      <div style={{ flex: '1' }}>
        <Navbar />
        <SignupForm onSubmit={this.handleSignup} />
      </div>
    );
  }
}

export default connect(null, { signup })(Signup);

sling/web/src/containers/Login/index.js

// @flow
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { login } from '../../actions/session';
import LoginForm from '../../components/LoginForm';
import Navbar from '../../components/Navbar';

type Props = {
  login: () => void,
}

class Login extends Component {
  static contextTypes = {
    router: PropTypes.object,
  }

  props: Props

  handleLogin = data => this.props.login(data, this.context.router);

  render() {
    return (
      <div style={{ flex: '1' }}>
        <Navbar />
        <LoginForm onSubmit={this.handleLogin} />
      </div>
    );
  }
}

export default connect(null, { login })(Login);

如你所见，我们引入 NavBar 组件，目的是让我们的页面更好看一些。

sling/web/src/components/Navbar/index.js

// @flow
import React from 'react';
import { Link } from 'react-router';
import { css, StyleSheet } from 'aphrodite';

const styles = StyleSheet.create({
  navbar: {
    display: 'flex',
    alignItems: 'center',
    padding: '0 1rem',
    height: '70px',
    background: '#fff',
    boxShadow: '0 1px 1px rgba(0,0,0,.1)',
  },

  link: {
    color: '#555459',
    fontSize: '22px',
    fontWeight: 'bold',
    ':hover': {
      textDecoration: 'none',
    },
    ':focus': {
      textDecoration: 'none',
    },
  },
});

const Navbar = () =>
  <nav className={css(styles.navbar)}>
    <Link to="/" className={css(styles.link)}>Sling</Link>
  </nav>;

export default Navbar;

react-router 使用说明：react 项目中，以前我们使用react-router-redux, 它在 action 中采用dispatch(push(/login))方式实现路由跳转。但是在 v4 版本的 react-router 中已经没有这个功能，为了实现上述跳转功能我们必须传递参数this.context.router到 action 中实现跳转。

Signup 组件与 Login 组件非常相近，SignupForm 和 LoginForm 也非常相似。

sling/web/src/components/SignupForm/index.js

// @flow
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router';
import { css, StyleSheet } from 'aphrodite';
import Input from '../Input';

const styles = StyleSheet.create({
  card: {
    maxWidth: '500px',
    padding: '3rem 4rem',
    margin: '2rem auto',
  },
});

type Props = {
  onSubmit: () => void,
  submitting: boolean,
  handleSubmit: () => void,
}

class SignupForm extends Component {
  props: Props

  handleSubmit = data => this.props.onSubmit(data);

  render() {
    const { handleSubmit, submitting } = this.props;

    return (
      <form
        className={`card ${css(styles.card)}`}
        onSubmit={handleSubmit(this.handleSubmit)}
      >
        <h3 style={{ marginBottom: '2rem', textAlign: 'center' }}>Create an account</h3>
        <Field
          name="username"
          type="text"
          component={Input}
          placeholder="Username"
          className="form-control"
        />
        <Field
          name="email"
          type="email"
          component={Input}
          placeholder="Email"
          className="form-control"
        />
        <Field
          name="password"
          type="password"
          component={Input}
          placeholder="Password"
          className="form-control"
        />
        <button
          type="submit"
          disabled={submitting}
          className="btn btn-block btn-primary"
        >
          {submitting ? 'Submitting...' : 'Sign up'}
        </button>
        <hr style={{ margin: '2rem 0' }} />
        <Link to="/login" className="btn btn-block btn-secondary">
          Login to your account
        </Link>
      </form>
    );
  }
}

const validate = (values) => {
  const errors = {};
  if (!values.username) {
    errors.username = 'Required';
  }
  if (!values.email) {
    errors.email = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  } else if (values.password.length < 6) {
    errors.password = 'Minimum of 6 characters';
  }
  return errors;
};

export default reduxForm({
  form: 'signup',
  validate,
})(SignupForm);

sling/web/src/components/LoginForm/index.js

// @flow
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router';
import { css, StyleSheet } from 'aphrodite';
import Input from '../Input';

const styles = StyleSheet.create({
  card: {
    maxWidth: '500px',
    padding: '3rem 4rem',
    margin: '2rem auto',
  },
});

type Props = {
  onSubmit: () => void,
  handleSubmit: () => void,
  submitting: boolean,
}

class LoginForm extends Component {
  props: Props

  handleSubmit = data => this.props.onSubmit(data);

  render() {
    const { handleSubmit, submitting } = this.props;

    return (
      <form
        className={`card ${css(styles.card)}`}
        onSubmit={handleSubmit(this.handleSubmit)}
      >
        <h3 style={{ marginBottom: '2rem', textAlign: 'center' }}>Login to Sling</h3>
        <Field name="email" type="text" component={Input} placeholder="Email" />
        <Field name="password" type="password" component={Input} placeholder="Password" />
        <button
          type="submit"
          disabled={submitting}
          className="btn btn-block btn-primary"
        >
          {submitting ? 'Logging in...' : 'Login'}
        </button>
        <hr style={{ margin: '2rem 0' }} />
        <Link to="/signup" className="btn btn-block btn-secondary">
          Create a new account
        </Link>
      </form>
    );
  }
}

const validate = (values) => {
  const errors = {};
  if (!values.email) {
    errors.email = 'Required';
  }
  if (!values.password) {
    errors.password = 'Required';
  }
  return errors;
};

export default reduxForm({
  form: 'login',
  validate,
})(LoginForm);

上述表单组件均采用redux-form, 这也是我们能够获取输入数据的原因。this.props.handleSubmit是 redux-form 提供的特定属性，使我们能够基于 name 从 Field 组件中获取输入的数据。submittingprop 也是 redux-form 提供的特定 prop，其值为布尔型，onSubmit被触发时submitting会被设为 true。

自定义 Field 组件，包含 input 以及显示 error 功能。

sling/web/src/components/Input/index.js

// @flow
import React from 'react';

type Props = {
  input: Object,
  label?: string,
  type?: string,
  placeholder?: string,
  style?: Object,
  meta: Object,
}

const Input = ({ input, label, type, placeholder, style, meta }: Props) =>
  <div style={{ marginBottom: '1rem' }}>
    {label && <label htmlFor={input.name}>{label}</label>}
    <input
      {...input}
      type={type}
      placeholder={placeholder}
      className="form-control"
      style={style && style}
    />
    {meta.touched && meta.error &&
      <div style={{ fontSize: '85%', color: 'rgb(255,59,48)' }}>{meta.error}</div>
    }
  </div>;

export default Input;

Signup 组件和 Login 组件需要从session.js中 import action

sling/web/src/actions/session.js

import { reset } from 'redux-form';
import api from '../api';

function setCurrentUser(dispatch, response) {
  localStorage.setItem('token', JSON.stringify(response.meta.token));
  dispatch({ type: 'AUTHENTICATION_SUCCESS', response });
}

export function login(data, router) {
  return dispatch => api.post('/sessions', data)
    .then((response) => {
      setCurrentUser(dispatch, response);
      dispatch(reset('login'));
      router.transitionTo('/');
    });
}

export function signup(data, router) {
  return dispatch => api.post('/users', data)
    .then((response) => {
      setCurrentUser(dispatch, response);
      dispatch(reset('signup'));
      router.transitionTo('/');
    });
}

export function logout(router) {
  return dispatch => api.delete('/sessions')
    .then(() => {
      localStorage.removeItem('token');
      dispatch({ type: 'LOGOUT' });
      router.transitionTo('/login');
    });
}

为使 redux action 方便发送 http 请求，通常将其封装在 API 工具文件中，我们也遵照规范实现。

sling/web/src/api/index.js

const API = process.env.REACT_APP_API_URL;

function headers() {
  const token = JSON.parse(localStorage.getItem('token'));

  return {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    Authorization: `Bearer: ${token}`,
  };
}

function parseResponse(response) {
  return response.json().then((json) => {
    if (!response.ok) {
      return Promise.reject(json);
    }
    return json;
  });
}

function queryString(params) {
  const query = Object.keys(params)
                      .map(k => `${encodeURIComponent(k)}=${encodeURIComponent(params[k])}`)
                      .join('&');
  return `${query.length ? '?' : ''}${query}`;
}

export default {
  fetch(url, params = {}) {
    return fetch(`${API}${url}${queryString(params)}`, {
      method: 'GET',
      headers: headers(),
    })
    .then(parseResponse);
  },

  post(url, data) {
    const body = JSON.stringify(data);

    return fetch(`${API}${url}`, {
      method: 'POST',
      headers: headers(),
      body,
    })
    .then(parseResponse);
  },

  patch(url, data) {
    const body = JSON.stringify(data);

    return fetch(`${API}${url}`, {
      method: 'PATCH',
      headers: headers(),
      body,
    })
    .then(parseResponse);
  },

  delete(url) {
    return fetch(`${API}${url}`, {
      method: 'DELETE',
      headers: headers(),
    })
    .then(parseResponse);
  },
};

使用这些 helper 函数，在 redux action 中只需调用api.post(/url, data)然后处理返回结果即可。另，每次请求 header 中均已包含来自 localStorage 的 jwt token。

create-react-app 支持.env环境变量。我们在根路径下创建.env 文件，存入 REACT_APP_=xxx，运行时即可通过`process.env.REACT_APP_`读取值，看下我们的实现。

REACT_APP_API_URL=http://localhost:4000/api

当用户注册或登录成功，action 会发起AUTHENTICATION_SUCCESS。我们需要创建 reducer 来监听 action 分发出的数据并将其存储到 redux state 中。

sling/web/src/reducers/session.js

const initialState = {
  isAuthenticated: false,
  currentUser: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case 'AUTHENTICATION_SUCCESS':
      return {
        ...state,
        isAuthenticated: true,
        currentUser: action.response.data,
      };
    case 'LOGOUT':
      return {
        ...state,
        isAuthenticated: false,
        currentUser: {},
      };
    default:
      return state;
  }
}

然后把 session reducer 放入总的 reducer 中，

sling/web/src/reducers/index.js

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';
import session from './session';

const appReducer = combineReducers({
  form,
  session,
});

export default function (state, action) {
  if (action.type === 'LOGOUT') {
    return appReducer(undefined, action);
  }
  return appReducer(state, action);
}

目前 session reducer 处理AUTHENTICATION_SUCCESS 和LOGOUT两种 action，并改变了 isAuthenticated 和 currentUser 的值。接下来我们将 redux state connect 到 Home 组件中，当用户登录时就可以看到当前用户。

sling/web/src/containers/Home/index.js

// @flow
import React, { Component, PropTypes } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import { logout } from '../../actions/session';
import Navbar from '../../components/Navbar';

type Props = {
  logout: () => void,
  currentUser: Object,
  isAuthenticated: boolean,
}

class Home extends Component {
  static contextTypes = {
    router: PropTypes.object,
  }

  props: Props

  handleLogout = () => this.props.logout(this.context.router);

  render() {
    const { currentUser, isAuthenticated } = this.props;

    return (
      <div style={{ flex: '1' }}>
        <Navbar />
        <ul>
          <li><Link to="/login">Login</Link></li>
          <li><Link to="/signup">Signup</Link></li>
        </ul>
        {isAuthenticated &&
          <div>
            <span>{currentUser.username}</span>
            <button type="button" onClick={this.handleLogout}>Logout</button>
          </div>
        }
      </div>
    );
  }
}

export default connect(
  state => ({
    isAuthenticated: state.session.isAuthenticated,
    currentUser: state.session.currentUser,
  }),
  { logout }
)(Home);

到目前为止，当用户登录后，我会显示当前用户的 username。并且添加 link，可直接路由到注册和登录页面。以上只是理论实现，当你尝试注册时你会发现报错No ‘Access-Control-Allow-Origin’ header is present on the requested resource.这是一个 http 请求跨域的错误，我们需要在 server 端处理它。

为处理这个跨域错误，我们需要安装第三方库 {:cors_plug, "~> 1.1"},然后在sling/api/sling/endpoint.ex中添加配置。

#above content

    plug CORSPlug

    plug Sling.Router
 end

最后重启 Phoenix Server 即可，这样就解决了跨域问题。

目前，用户可以登录成功，但是当刷新页面时就会被剔出。接下来我们就解决这个问题。

Commit 看看目前我们已经实现的代码

保存用户会话（Persisting User Sessions）

我们在 Server 端已经实现/sessions/refresh接口。新建一个authenticateaction 当用户刷新页面时调用。显然这个调用需要放在 App 组件中，因为它是我们的根组件，也就是页面刷新会首先加载这个组件。

sling/web/src/containers/App/index.js

// @flow
import React, { Component } from 'react';
import { BrowserRouter, Match, Miss } from 'react-router';
import { connect } from 'react-redux';
import { authenticate } from '../../actions/session';
import Home from '../Home';
import NotFound from '../../components/NotFound';
import Login from '../Login';
import Signup from '../Signup';

type Props = {
  authenticate: () => void,
}

class App extends Component {
  componentDidMount() {
    const token = localStorage.getItem('token');

    if (token) {
      this.props.authenticate();
    }
  }

  props: Props

  render() {
    return (
      <BrowserRouter>
        <div style={{ display: 'flex', flex: '1' }}>
          <Match exactly pattern="/" component={Home} />
          <Match pattern="/login" component={Login} />
          <Match pattern="/signup" component={Signup} />
          <Miss component={NotFound} />
        </div>
      </BrowserRouter>
    );
  }
}

export default connect(
  null,
  { authenticate }
)(App);

组件的钩子函数componentDidMount会首先检查 localStorage 中的 token。若 token 存在就会调用authenticate函数请 server 端认证用户。

sling/web/src/actions/session.js

export function authenticate() {
  return dispatch => api.post('/sessions/refresh')
    .then((response) => {
      setCurrentUser(dispatch, response);
    })
    .catch(() => {
      localStorage.removeItem('token');
      window.location = '/login';
    });
}

api.post(‘/sessions/refresh’)没有发送任何数据，其实默认在 header 中包含 token 数据。所以 Guardian 才会找到 token 并实现用户认证。若认证失败就会从 localStorage 移除 token，并跳转到登录页面。

现在你试试，登录以后刷新页面已经不会被剔出。

对比一下代码变化 Commit

路由保护（Protecting Routes）

在我们的 APP 中有这样的要求，登录用户才能看到 home 页面。未登录的用户只能看到注册和登录页面，

前面我们已经实现了基本的路由跳转。但是 React-router v4 还提供了一些新的功能。比如可以直接渲染<Redirect/> 组件。我们可以向无状态组件中传入参数然后决定是渲染<Match />组件还是渲染<Redirect />组件。官方文档

下面我们实现<MatchAuthenticated /> 和 <RedirectAuthenticated />两个 stateless 组件

sling/web/src/components/MatchAuthenticated/index.js

// @flow
import React from 'react';
import { Match, Redirect } from 'react-router';

type Props = {
  component: any,
  pattern: string,
  exactly?: boolean,
  isAuthenticated: boolean,
  willAuthenticate: boolean,
}

const MatchAuthenticated = ({
  pattern,
  exactly,
  isAuthenticated,
  willAuthenticate,
  component: Component,
}: Props) =>
  <Match
    exactly={exactly}
    pattern={pattern}
    render={(props) => {
      if (isAuthenticated) { return <Component {...props} />; }
      if (willAuthenticate) { return null; }
      if (!willAuthenticate && !isAuthenticated) { return <Redirect to={{ pathname: '/login' }} />; }
      return null;
    }}
  />;

export default MatchAuthenticated;

sling/web/src/components/RedirectAuthenticated/index.js

// @flow
import React from 'react';
import { Match, Redirect } from 'react-router';

type Props = {
  component: any,
  pattern: string,
  exactly?: boolean,
  isAuthenticated: boolean,
  willAuthenticate: boolean,
}

const RedirectAuthenticated = ({
  pattern,
  exactly,
  isAuthenticated,
  willAuthenticate,
  component: Component,
}: Props) =>
  <Match
    exactly={exactly}
    pattern={pattern}
    render={(props) => {
      if (isAuthenticated) { return <Redirect to={{ pathname: '/' }} />; }
      if (willAuthenticate) { return null; }
      if (!willAuthenticate && !isAuthenticated) { return <Component {...props} />; }
      return null;
    }}
  />;

export default RedirectAuthenticated;

在构建以上组件的过程中，我们发现需要传递一些像 willAuthenticate 这样的参数以保证路径跳转正常运行。以 willAuthenticate 为例，当认证请求已经发起，但是认证是否成功还未知，这种中间状态就需要willAuthenticate=true来处理，以保证不会出现错误的页面跳转。

现在我们来修改 App 组件，使用自定义组件替换 React-router 的。

sling/web/src/containers/App/index.js

// @flow
import React, { Component } from 'react';
import { BrowserRouter, Miss } from 'react-router';
import { connect } from 'react-redux';
import { authenticate, unauthenticate } from '../../actions/session';
import Home from '../Home';
import NotFound from '../../components/NotFound';
import Login from '../Login';
import Signup from '../Signup';
import MatchAuthenticated from '../../components/MatchAuthenticated';
import RedirectAuthenticated from '../../components/RedirectAuthenticated';

type Props = {
  authenticate: () => void,
  unauthenticate: () => void,
  isAuthenticated: boolean,
  willAuthenticate: boolean,
}

class App extends Component {
  componentDidMount() {
    const token = localStorage.getItem('token');

    if (token) {
      this.props.authenticate();
    } else {
      this.props.unauthenticate();
    }
  }

  props: Props

  render() {
    const { isAuthenticated, willAuthenticate } = this.props;
    const authProps = { isAuthenticated, willAuthenticate };

    return (
      <BrowserRouter>
        <div style={{ display: 'flex', flex: '1' }}>
          <MatchAuthenticated exactly pattern="/" component={Home} {...authProps} />
          <RedirectAuthenticated pattern="/login" component={Login} {...authProps} />
          <RedirectAuthenticated pattern="/signup" component={Signup} {...authProps} />
          <Miss component={NotFound} />
        </div>
      </BrowserRouter>
    );
  }
}

export default connect(
  state => ({
    isAuthenticated: state.session.isAuthenticated,
    willAuthenticate: state.session.willAuthenticate,
  }),
  { authenticate, unauthenticate }
)(App);

我们已经替换掉 Match 组件，并传递必要的认证参数。最后还需要添加一个 unauthenticate action，当认证失败时用于改变 willAuthenticate 的值。

sling/web/src/actions/session.js

export function authenticate() {
  return (dispatch) => {
    dispatch({ type: 'AUTHENTICATION_REQUEST' });
    return api.post('/sessions/refresh')
      .then((response) => {
        setCurrentUser(dispatch, response);
      })
      .catch(() => {
        localStorage.removeItem('token');
        window.location = '/login';
      });
  };
}

export const unauthenticate = () => ({ type: 'AUTHENTICATION_FAILURE' });

在认证的流程中，首先发起 AUTHENTICATION_REQUEST 开始认证，执行完 setCurrentUser 函数发起AUTHENTICATION_SUCCESS说明认证成功，认证失败则会发起AUTHENTICATION_FAILURE。根据这个流程我们相应的修正 session reducer。

sling/web/src/reducers/session.js

const initialState = {
  isAuthenticated: false,
  willAuthenticate: true,
  currentUser: {},
};

export default function (state = initialState, action) {
  switch (action.type) {
    case 'AUTHENTICATION_REQUEST':
      return {
        ...state,
        willAuthenticate: true,
      };
    case 'AUTHENTICATION_SUCCESS':
      return {
        ...state,
        willAuthenticate: false,
        isAuthenticated: true,
        currentUser: action.response.data,
      };
    case 'AUTHENTICATION_FAILURE':
      return {
        ...state,
        willAuthenticate: false,
      };
    case 'LOGOUT':
      return {
        ...state,
        willAuthenticate: false,
        isAuthenticated: false,
        currentUser: {},
      };
    default:
      return state;
  }
}

ok，现在我们已经实现用户登录登出以及首页的访问。

Commit 来对比下代码变化

这部分就此结束，下一篇将会进入到我们应用的核心：允许用户建立聊天室。

首发地址：http://blog.zhulinpinyu.com/2017/06/28/lets-build-a-slack-clone-with-elixir-phoenix-and-react-part-3-frontend-authentication/

[译] Let’ s Build |> 使用 Elixir，Phoenix 和 React 打造克隆版的 Slack (part 2 — Backend Authentication)

zhulinpinyu — Wed, 28 Jun 2017 22:49:43 +0800

Live Demo---GitHub Repo

Part 1 — Project setup | Part 2 — Backend Authentication

上一篇博文中，我们已经搭建好了 Phoenix 和 React 项目。这篇博文我们将添加 User 模型并且实现用户身份认证的 API

我们来创建 user 数据表。使用 Phoenix 内置的 generator。

mix phoenix.gen.json User users username:string email:string password_hash:string

这个命令生成一堆模板文件，比如 model、controller 等。第一个参数是 module 名称 User,第二个参数是 model 的名称 users,还是复数（和 rails 很像吧）。接着后面是数据库表的字段名和数据类型。

打开自动生成的 migration 文件，并做一些修改。

defmodule Sling.Repo.Migrations.CreateUser do
  use Ecto.Migration

  def change do
    create table(:users) do
      add :username, :string, null: false
      add :email, :string, null: false
      add :password_hash, :string, null: false

      timestamps()
    end

    create unique_index(:users, [:username])
    create unique_index(:users, [:email])
  end
end

sling/api/priv/repo/migrations/timestamp_create_user.exs

为保证每个字段都必须有值，我们添加非空约束null: false。然后我们为字段username, emial 创建唯一性索引，以确保其字段值不会重复。我们也会在 model 级别添加字段（username, emial）值唯一性校验，在数据级别添加也是为了保证数据库的完整性。

使用 mix 运行 mirgation，创建 users table

mix ecto.migrate

运行 migration 时你可能会遇到这个错误

== Compilation error on file web/controllers/user_controller.ex ==
** (CompileError) web/controllers/user_controller.ex:18: undefined function user_path/3
    (stdlib) lists.erl:1338: :lists.foreach/2
    (stdlib) erl_eval.erl:670: :erl_eval.do_apply/6
    (elixir) lib/kernel/parallel_compiler.ex:117: anonymous fn/4 in Kernel.ParallelCompiler.spawn_compilers/1

这是由于运行 mix phoenix.gen.json自动创建user_controller.ex,而我们没有为该 controller 在 router.ex 中配置路由user_path因此报错。

由于我们暂时用不到user_controller.ex,所以直接全部注释掉其内容。再次运行mix ecto.migrate,即可成功创建 users table。

我们来看看users.exs文件

defmodule Sling.User do
  use Sling.Web, :model

  schema "users" do
    field :username, :string
    field :email, :string
    field :password_hash, :string

    timestamps()
  end

  def changeset(struct, params \\ %{}) do
    struct
    |> cast(params, [:username, :email, :password_hash])
    |> validate_required([:username, :email, :password_hash])
    |> unique_constraint(:username)
    |> unique_constraint(:email)
  end
end

sling/api/web/models/user.ex

User Model 使用函数unique_constraint为字段username和email添加唯一性校验。

在 Ecto（访问数据库的 lib, 概念有点类似于 Rails 的 ORM ActiveRecord）中每次对数据库的 insert 和 update 都必须通过执行changeset函数来实现。那么我们就可以定义多种类型的 changeset, 并能灵活的设置校验。

现在我们来简单的看看，到目前为止我们都干了些啥：打开iex然后创建 user (这一步就类似于rails console)

iex -S mix

然后在iex里

changeset = Sling.User.changeset(%Sling.User{}, %{email: "first@user.com", username: "first_user", password_hash: "password"})
Sling.Repo.insert(changeset)

User Model 的 changeset 函数有两个参数，第一个是 struct(一种数据结构，当前为空的%Sling.User{})，第二个是 map。（第二个参数会根据 changeset 函数中得条件，将值映射到第一个参数）具体如下：

运行成功会返回 :ok元组，表示创建成功。

{:ok,
 %Sling.User{__meta__: #Ecto.Schema.Metadata<:loaded, "users">,
  email: "first@user.com", id: 1,
  inserted_at: #Ecto.DateTime<2016-10-20 20:04:07>, password_hash: "password",
  updated_at: #Ecto.DateTime<2016-10-20 20:04:07>, username: "first_user"}}

你应该注意到，我们上面例子中密码是以明码的形式存储于数据库中的，这显然是极其危险的做法。我们来使用第三方库Comeonin来解决这个问题。修改mix.exs添加依赖（首先在依赖列表中添加，然后在 application 列表中添加）

# content above

def application do
  [mod: {Sling, []},
   applications: [:phoenix, :phoenix_pubsub, :phoenix_html, :cowboy, :logger, :gettext,
                  :phoenix_ecto, :postgrex, :comeonin]] # :comeonin added here
end

# ...

defp deps do
  [{:phoenix, "~> 1.2.1"},
   {:phoenix_pubsub, "~> 1.0"},
   {:phoenix_ecto, "~> 3.0"},
   {:postgrex, ">= 0.0.0"},
   {:phoenix_html, "~> 2.6"},
   {:phoenix_live_reload, "~> 1.0", only: :dev},
   {:gettext, "~> 0.11"},
   {:cowboy, "~> 1.0"},
   {:comeonin, "~> 2.5"}] # :comeonin added here
end

# content below

sling/api/mix.exs

安装依赖运行：

mix deps.get

安装好 Comeonin 以后，我们就可以使用 hash 算法处理密码。现在更新user.exs

defmodule Sling.User do
  use Sling.Web, :model

  schema "users" do
    field :username, :string
    field :email, :string
    field :password_hash, :string
    field :password, :string, virtual: true

    timestamps()
  end

  def changeset(struct, params \\ %{}) do
    struct
    |> cast(params, [:username, :email])
    |> validate_required([:username, :email])
    |> unique_constraint(:username)
    |> unique_constraint(:email)
  end

  def registration_changeset(struct, params) do
    struct
    |> changeset(params)
    |> cast(params, [:password])
    |> validate_length(:password, min: 6, max: 100)
    |> put_password_hash()
  end

  defp put_password_hash(changeset) do
    case changeset do
      %Ecto.Changeset{valid?: true, changes: %{password: password}} ->
        put_change(changeset, :password_hash, Comeonin.Bcrypt.hashpwsalt(password))
      _ ->
        changeset
    end
  end
end

sling/api/web/models/user.ex

上面的修改中我们添加虚拟字段 password，目的是在数据 model 中使用它，但并不需要其存储于数据库中。在 changeset 函数中移除password_hash,我们将不允许 changeset 函数直接操作该字段。另外新建registration_changeset用于更新用户的密码。put_password_hash函数将 password 值 hash 运算以后存入 password_hash 并 insert 在数据库中。

我们在iex -S mix中试试新的registration_changeset函数

changeset = Sling.User.registration_changeset(%Sling.User{}, %{email: "second@user.com", username: "second_user", password: "password"})
Sling.Repo.insert(changeset)
...
{:ok,
 %Sling.User{__meta__: #Ecto.Schema.Metadata<:loaded, "users">,
  email: "second@user.com", id: 3,
  inserted_at: #Ecto.DateTime<2016-10-20 20:29:12>, password: "password",
  password_hash: "$2b$12$7mJCI9CGy4I3mf1wek/tA.OZQryn31YImjVDcV/ovU5Xrm4xEn4Mq",
  updated_at: #Ecto.DateTime<2016-10-20 20:29:12>, username: "second_user"}}

看到了吧，密码已经妥妥的完成哈希化

查看代码变化 Commit

目前为止我们已经能够创建用户，但是要从前端通过 API 实现用户认证，我们还需要实现一些 token 策略。我打算使用 Json Web Token 库 Guardian来实现我们的想法，这个库有很多用户认证相关的功能特性。

在 mix.exs依赖列表末尾添加 {:guardian, "~> 0.13.0"}，运行mix deps.get安装依赖。

在 config.exs 中配置 Guardian

# content above

config :guardian, Guardian,
  issuer: "Sling",
  ttl: {30, :days},
  verify_issuer: true,
  serializer: Sling.GuardianSerializer

import_config "#{Mix.env}.exs"

sling/api/config/config.exs

Guardian 也需要配置 secret_key，通过运行mix phoenix.gen.secret生成。我们为 development 和 production 环境分别设置不同的 secret_key。在 production 环境中我们把 secret_key 保存在环境变量中。

config :guardian, Guardian,
  secret_key: "LG17BzmhBeq81Yyyn6vH7GVdrCkQpLktol2vdXlBzkRRHpYsZwluKMG9r6fnu90m"

sling/api/config/dev.exs

config :guardian, Guardian,
  secret_key: System.get_env("GUARDIAN_SECRET_KEY")

sling/api/config/prod.exs

Guardian 还需要配置 serializer(详见Guardian readme)

defmodule Sling.GuardianSerializer do
  @behaviour Guardian.Serializer

  alias Sling.Repo
  alias Sling.User

  def for_token(user = %User{}), do: {:ok, "User:#{user.id}"}
  def for_token(_), do: {:error, "Unknown resource type"}

  def from_token("User:" <> id), do: {:ok, Repo.get(User, String.to_integer(id))}
  def from_token(_), do: {:error, "Unknown resource type"}
end

sling/api/lib/sling/guardian_serializer.ex

查看代码变化 Commit

结合 Guardian 配置，接下来实现 controller 中相应的接口。我们需要实现四个接口，分别用作注册，登录，登出以及当用户在前端刷新页面时自动再次刷新/认证。首先在 router.ex 中配置路由。

defmodule Sling.Router do
  use Sling.Web, :router

  # pipeline :browser do
  #   plug :accepts, ["html"]
  #   plug :fetch_session
  #   plug :fetch_flash
  #   plug :protect_from_forgery
  #   plug :put_secure_browser_headers
  # end

  pipeline :api do
    plug :accepts, ["json"]
    plug Guardian.Plug.VerifyHeader, realm: "Bearer"
    plug Guardian.Plug.LoadResource
  end

  # scope "/", Sling do
  #   pipe_through :browser

  #   get "/", PageController, :index
  # end

  scope "/api", Sling do
    pipe_through :api

    post "/sessions", SessionController, :create
    delete "/sessions", SessionController, :delete
    post "/sessions/refresh", SessionController, :refresh
    resources "/users", UserController, only: [:create]
  end
end

sling/api/web/router.ex

注：上述 router 配置中，browser 相关的路由是无效的，故已经注释掉。

SessionController 的 create action 处理 Login 发出的 POST 请求；
SessionController 的 delete action 处理 Logout 发出的 Delete 请求；
SessionController 的 refresh action 处理 refresh/authenticate 发出的 POST 请求；
UserController 的 create action 处理 signup 发出的 POST 请求；

在 pipeline api 中添加两个 Plug。(Plug 就像函数，不过它在每次请求时都会执行，类似于 rails 的 before_action，也可称之为拦截器)。

VerifyHeader Plug的作用是在请求头的 Authorization: Bearer header 中查找并校验 jwt。
LoadResource Plug的作用是当请求头的 jwt 校验通过后加载当前用户（current user）。

为使这两个 Plug 正确工作，我们还需在 controller 中配置其他 Guardian 方法以便实现对 current user 的访问或者相关权限的检查。

在 router.ex 中，我们添加的路由均放置在 /api下面，为了方便代码文件查找我们重新配置目录结构将 user_controller放置在 sling/api/web/controllers/api/user_controller.ex路径下。然后清理掉 user_controller 中的其他内容，只实现 create action。如下所述，

defmodule Sling.UserController do
  use Sling.Web, :controller

  alias Sling.User

  def create(conn, params) do
    changeset = User.registration_changeset(%User{}, params)

    case Repo.insert(changeset) do
      {:ok, user} ->
        new_conn = Guardian.Plug.api_sign_in(conn, user, :access)
        jwt = Guardian.Plug.current_token(new_conn)

        new_conn
        |> put_status(:created)
        |> render(Sling.SessionView, "show.json", user: user, jwt: jwt)
      {:error, changeset} ->
        conn
        |> put_status(:unprocessable_entity)
        |> render(Sling.ChangesetView, "error.json", changeset: changeset)
    end
  end
end

sling/api/web/controllers/api/user_controller.ex

create action 首先使用 User 的 registration_changset 函数构建 changeset，这样我们的密码就会被哈希化。这一步和我们在 iex 中创建 User 的过程比较相似。

接下来 case 语句 Repo.insert(changeset) 要么返回结果是 user 成功创建，要么创建失败报错。Phoenix 使用 ChangesetView 去处理上述创建失败的结果（包括 changeset 数据和错误信息）

若 user 创建成功，我们使用 Guardian.api_sign_in 函数分配这个新用户到当前的 connection 中。然后我们使用已经分配 user 的 connection 创建 Json Web Token。

Rails 中，创建 json response 需要借助第三方库来实现。Phoenix 默认提供 json response 的实现方式。前面运行 mix phoenix.gen.json时已经默认生成 user_view.ex 文件，现在我们来修改它以满足需要。

defmodule Sling.UserView do
  use Sling.Web, :view

  def render("user.json", %{user: user}) do
    %{
      id: user.id,
      username: user.username,
      email: user.email,
    }
  end
end

sling/api/web/views/user_view.ex

如你所见，我们没有在 controller 中实现 index 和 show action，所以我们也相应的删去 view 中的 render 函数。我们只实现 user.json 的 render 函数，并且不必向前端返回 password_hash 数据。

你可能已经注意到前面的 UserController 中，我们没有用到 UserView，相反使用的是render(Sling.SessionView, "show.json", user: user, jwt: jwt)。这么做是因为当用户注册或者登录完成以后，我们打算将 jwt 和用户数据一起返回，为了便于理解我新建 SessionView。

defmodule Sling.SessionView do
  use Sling.Web, :view

  def render("show.json", %{user: user, jwt: jwt}) do
    %{
      data: render_one(user, Sling.UserView, "user.json"),
      meta: %{token: jwt}
    }
  end

  def render("error.json", _) do
    %{error: "Invalid email or password"}
  end

  def render("delete.json", _) do
    %{ok: true}
  end

  def render("forbidden.json", %{error: error}) do
    %{error: error}
  end
end

sling/api/web/views/session_view.ex

SessionView 的 show.json 模板，使用 UserView 的 user.json 模板，并且把 jwt 作为 token 值存入 meta 字段中。在 SessionController 中，还需要构建 json response 用于响应无效信息登录，登出，用户认证失败。这些响应将使用 error.json delete.json和 forbidden.json模板渲染构建。

我们来实现SessionController

defmodule Sling.SessionController do
  use Sling.Web, :controller

  def create(conn, params) do
    case authenticate(params) do
      {:ok, user} ->
        new_conn = Guardian.Plug.api_sign_in(conn, user, :access)
        jwt = Guardian.Plug.current_token(new_conn)

        new_conn
        |> put_status(:created)
        |> render("show.json", user: user, jwt: jwt)
      :error ->
        conn
        |> put_status(:unauthorized)
        |> render("error.json")
    end
  end

  def delete(conn, _) do
    jwt = Guardian.Plug.current_token(conn)
    Guardian.revoke!(jwt)

    conn
    |> put_status(:ok)
    |> render("delete.json")
  end

  def refresh(conn, _params) do
    user = Guardian.Plug.current_resource(conn)
    jwt = Guardian.Plug.current_token(conn)
    {:ok, claims} = Guardian.Plug.claims(conn)

    case Guardian.refresh!(jwt, claims, %{ttl: {30, :days}}) do
      {:ok, new_jwt, _new_claims} ->
        conn
        |> put_status(:ok)
        |> render("show.json", user: user, jwt: new_jwt)
      {:error, _reason} ->
        conn
        |> put_status(:unauthorized)
        |> render("forbidden.json", error: "Not authenticated")
    end
  end

  def unauthenticated(conn, _params) do
    conn
    |> put_status(:forbidden)
    |> render(Sling.SessionView, "forbidden.json", error: "Not Authenticated")
  end

  defp authenticate(%{"email" => email, "password" => password}) do
    user = Repo.get_by(Sling.User, email: String.downcase(email))

    case check_password(user, password) do
      true -> {:ok, user}
      _ -> :error
    end
  end

  defp check_password(user, password) do
    case user do
      nil -> Comeonin.Bcrypt.dummy_checkpw()
      _ -> Comeonin.Bcrypt.checkpw(password, user.password_hash)
    end
  end
end

sling/api/web/controllers/api/session_controller.ex

create action 也就是 login 调用私有函数 authenticate（返回用户信息或者错误），这和 signup action 非常像。用户登录并生成 token，最后使用 SessionView show.json 模板构建响应数据。

refresh 看起来也似曾相识，只是不需要创建 connection 和用户登录。我们调用 Guardian 的 refresh 函数，传入当前的 jwt 和 claims, 返回一个新的有效期为 30 天的 jwt。

用户登出只需要简单的调用 Guardian.revoke!(jwt)即可，其目的就是使当前用户的 token 失效，确保不能再次使用。

我们写了一大堆代码，但都是后端用户认证所必要的。

提交代码，以供对比commit

好了，这段就到此结束，接下来我们在前端使用 JavaScript 代码实现用户注册。

首发地址：http://blog.zhulinpinyu.com/2017/06/27/lets-build-a-slack-clone-with-elixir-phoenix-and-react-part-2-backend-authentication/

[译] Let’ s Build |> 使用 Elixir，Phoenix 和 React 打造克隆版的 Slack (part 1 — Project setup)

zhulinpinyu — Tue, 27 Jun 2017 18:05:26 +0800

Live Demo---GitHub Repo

Part 1 — Project setup | Part 2 — Backend Authentication

缘起

我是一个 Ruby 程序员，最近开始学习 Elixir。我惊叹于 Elixir 和 Phoenix 展现的技术魅力，并很快喜欢上了这个新东西。就像 Rails 之于 Ruby 一样，Phoenix 使得 Elixir 变得流行起来，原因就在于 Elixir 使得开发人员能够高效的编写出性能优秀，稳定性好的应用程序，并且很容易使用这些应用处理实时数据。

写这篇博文时，我只有大约一周的 Phoenix 使用经验。我写这篇博文的目的就是趋势自己从不同的角度思考正在解决的问题，以期获得对这门语言和框架更深入的理解。如果你在代码中发现任何错误或有改进的建议，欢迎给我来信或者提交pull request!

如果你和我一样也是个 Elixir 新手，我推荐你阅读 Programming Elixir 和 Programming Phoenix ,这两本书全面的阐述了 Elixir 和 Phoenix 的基本要点。

我们要做什么

为了向我喜爱的聊天应用 Slack 致敬，我将打造一个高仿版的 Slack，我叫它 Sling。为了让这篇博文简洁、完整、可读，我只实现 Slack 的部分功能，但是要实现的这部分功能足够我们习得 Phoenix 的基本原理。

Slack 有 team 的概念，并且每个 team 有若干个 channel。team 成员能够加入到 channel，channel 就是聊天的地方。简化起见，我们就不创建 team 这个功能了，取而代之的是我们将创建 room，每个注册用户都能加入到 room 中，并且在 room 中聊天。

我们会使用牛 x 的Phoenix Presence Module展示当前 room 中的在线用户。

我将尽可能详尽的展示出我是如何构建这个应用的，为此我会保持小增量的 git commit。并且在每次提交后留下 git diff 的链接。

查看当前代码

技术栈

服务器端

前端

由于我的技术经验是使用 Ruby 构建 web 应用，所以熟悉 Rails 的读者对于我写的东西会更易于理解。我假定你熟悉JavaScript和ES6。由于这不是 React 教程，所以我会尽量解释React组件相关的逻辑，但是不会深究。

如果你还没有安装Elixir或者Phoenix，请看这里

项目结构

对于我们要构建的应用而言，真实项目一般会创建两个独立的代码仓库，一个用于放置Phoenix API,另一个用于放置React App。但是为了使我们的博文清楚明了，我将代码放置在同一个仓库中。目录结构如下：

sling/
    |--- api/
        (phoenix app)
    |--- web/
        (react app)

开始吧！少年。

创建 Phoenix 应用

创建一个新的文件夹作为我们的代码仓库

mkdir sling
cd sling

生成新的 Phoenix 应用，我们使用Phoenix直接作为JSON API。所以不需要默认安装的 asset manager, 使用参数--no-brunch；也不需要 html 模板和浏览器端的路由，使用参数--no-html

mix phoenix.new sling --no-html --no-brunch
mv sling api

创建 React 应用

使用 create-react-app初始化 React App，这是一个强大的工具，零配置搭建我们的前端应用。

安装 create-react-app命令行工具

npm i -g create-react-app

创建 React App

create-react-app sling
mv sling web

牛叉吧，我们已经初始化好了后端的 Phoenix API 和前端的 React App。

我们第一个正式的提交 init commit

配置 Phoenix 项目

首先配置数据库，开发环境下默认的数据库配置位于该文件sling/api/config/dev.exs, PostgreSQL 默认用户密码均为 postgres。安全起见我们新建一个文件dev.secret.exs,用于存放私人的数据库配置信息，覆盖掉默认的数据库连接配置。这样一来也便于别人使用我们的代码。将dev.secret.exs加入到.gitignore 中 (由于新建的配置文件是私有信息所以不必提交)，内容如下：

sling/api/config/dev.secret.exs

use Mix.Config

config :sling, Sling.Repo,
  username: "your_postgres_user",
  password: "your_postgres_password"

在dev.exs的末尾添加 import "dev.secret.exs",这样我们的私有配置才能生效。

sling/api/config/dev.exs

# contents above

import_config "dev.secret.exs"

创建数据库（当前所在路径为sling/api）

mix ecto.create

数据库创建完成后，启动 Phoenix App。

mix phoenix.server

访问 http://localhost:4000, 正常情况会报错，原因在于我们的 Phoenix App 只用做 API，没有配置网页浏览相关的路由。

Git Commit

Phoenix 已经配置完成，接下来我们配置 React App。

配置 React 项目

create-react-app 已近初始化了一个可运行的 app, npm start, 访问 http://localhost:3000，就能看到初始化的 react app。我们要配置自己的 redux react-router, 所以删除掉web/src目录下的所有文件。

另，我们将使用最新的 JavaScript 依赖管理工具Yarn, 安装指南在此.

在这个前端应用中有许多第三方库我们需要使用，一次性全部将其安装（当前目录是sling/web）

yarn add aphrodite lodash md5 moment phoenix react-redux react-router@4.0.0-alpha.5 redux redux-form redux-thunk

你应该注意到我们使用 v4-alpha 版本的 react-router, 其相较于 v2 版本的 react-router 有很多重大的改变。借这个机会我们一并学一学 v4-alpha 版 react-router, 期待 v4 正式版尽快发布，如有变化到时我会更新博文。

我将使用Airbnb's styleguide,其中用到了 eslint 和 flow，所以接下来我们安装开发环境下用到的第三方库。

yarn add babel-eslint eslint eslint-config-airbnb eslint-plugin-flowtype eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react --dev

Linting rules 的配置完全依赖于个人的喜好，下面是我自己用的.eslintrc文件。（react/no-unused-prop-types 规则被 disable 掉了，原因是和 flowtype 有冲突）

sling/web/.eslintrc

{
  "parser": "babel-eslint",
  "plugins": ["react", "flowtype"],
  "extends": ["airbnb", "plugin:flowtype/recommended"],
  "rules": {
    "react/jsx-filename-extension": 0,
    "import/prefer-default-export": 0,
    "react/no-unused-prop-types": 0,
    "camelcase": 0
  },
  "globals": {
    "fetch": true,
    "window": true,
    "document": true,
    "localStorage": true
  }
}

提交代码 show installed packages

配置 React/Redux

React 项目有各种各样的目录结构，当然都是基于应用场景权衡的结果。就我们的项目而言，创建 containers 目录用于存放和 redux store 连接相关的组件。创建 components 目录，存放其他组件。创建 actions 和 reducers 目录分别用于存放 action 和 reducer 相关的文件。创建 store 目录存放 redux store 相关的配置文件。我们着手开始吧。

创建 app 的入口文件 sling/web/src/index.js, 这个文件需要导入 redux store 配置文件（稍后创建）, App 容器组件，并挂载到 index.html 的<div id="root" />节点下。

sling/web/src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import store from './store';
import App from './containers/App';

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.getElementById('root')
);

创建上面提到的 redux store 配置文件，引入 reducers 文件（稍后创建），使用 redux-thunk 处理异步操作和 Promises。

sling/web/src/store/index.js

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import reducers from '../reducers';

const middleWare = [thunk];

const createStoreWithMiddleware = applyMiddleware(...middleWare)(createStore);

const store = createStoreWithMiddleware(reducers);

export default store;

创建 reducer 根文件 sling/web/src/reducers/index.js，这个文件用于汇总其他的 reducer 文件，但是现在我们只需要用 redux-form 使 reducer 能正常工作即可。我们不直接返回配置参数的 combineReducers 函数，相反，当 logout 时我们强制返回带 undefined 参数的 appReducer，这样就会强制初始化所有 reducer 的 state（也就是强制清理登出用户的 redux state，不会让其污染下一个 login 用户的 state）

sling/web/src/reducers/index.js

import { combineReducers } from 'redux';
import { reducer as form } from 'redux-form';

const appReducer = combineReducers({
  form,
});

export default function (state, action) {
  if (action.type === 'LOGOUT') {
    return appReducer(undefined, action);
  }
  return appReducer(state, action);
}

现在我们来创建 App 组件，在这个组件中我们要到了 v4 版的 react-router 来配置页面路由。目前我们只有两个路由，一个是 Home 路由，另一个是 404 页面。

sling/web/src/containers/App/index.js

// @flow
import React, { Component } from 'react';
import { BrowserRouter, Match, Miss } from 'react-router';
import Home from '../Home';
import NotFound from '../../components/NotFound';

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div>
          <Match exactly pattern="/" component={Home} />
          <Miss component={NotFound} />
        </div>
      </BrowserRouter>
    );
  }
}

export default App;

目前我们的 Home 页面只是简单的组件

sling/web/src/containers/Home/index.js

// @flow
import React from 'react';

const Home = () => (<div>Home</div>);

export default Home;

NotFound 组件

sling/web/src/components/NotFound/index.js

// @flow
import React from 'react';
import { Link } from 'react-router';

const NotFound = () =>
  <div style={{ margin: '2rem auto', textAlign: 'center' }}>
    <p>Page not found</p>
    <p><Link to="/">Go to the home page →</Link></p>
  </div>;

export default NotFound;

好，redux 的基本配置已经完成。

查看 commit 的代码

到目前为止，我们的前端 App 和后端 API 还无法通讯，不过也好，本篇博文就此结束。下篇博文我们将实现前端和后端的通讯，并且添加用户账户和用户身份认证。

首发地址：http://blog.zhulinpinyu.com/2017/06/22/lets-build-a-slack-clone-with-elixir-phoenix-and-react-part-1-project-setup/

新手本地搭建 ruby-china 入门第一弹之创建管理员帐号

zhulinpinyu — Fri, 17 Jun 2016 10:57:59 +0800

在项目目录找到下 config/config.yml文件，看到如下

admin_emails:
    - "admin@admin.com"

使用该邮箱注册即可获得管理员权限。

Ruby module 疑问？

zhulinpinyu — Tue, 12 Aug 2014 23:11:12 +0800

Question:

module A
    class B
        def say_hi
            "Hi"
        end
    end
end

module A
    class C
        def say
            b1 = A::B.new
            p b1.say_hi  # Hi
            b2 = B.new
            p b2.say_hi  # Hi
        end
    end
end


c = A::C.new
c.say

如上示例：

其中在 module A 中A::B.new和B.new区别是什么？

用 resque 实现后台上传任务时出现编码错误的问题？

zhulinpinyu — Mon, 19 May 2014 23:20:19 +0800

Hi 大家好，

我用 rails 做一个文件上传的功能，想使用 resque 使其在后台执行，但遇到如下错误

def import
    if request.post? && params[:file]
      Resque.enqueue(Job, params[:file])
      redirect_to search_url, notice: "File imported"
    end
  end

Encoding::UndefinedConversionError: "\xE2" from ASCII-8BIT to UTF-8

还请各位不吝赐教。

制作 Ubuntu ISO 镜像，求靠谱的方法？

zhulinpinyu — Fri, 09 May 2014 17:35:11 +0800

Hi 大家好，

最近开发中遇到一个问题， 背景： 有一个台 ubuntu server，已安装好相关软件，搭建好开发环境。

疑问我想将这台搭建好的开发环境制作成 ISO 镜像方便在其他物理机器使用（就像安装官方 ubuntu 系统那样）。

Tips:

网络上提到的用 remastersys 经测试不能用。

有了解 CRM 比较多的社员么？期待推荐一款基于 RAILS 的 CRM 系统谢谢

zhulinpinyu — Mon, 29 Jul 2013 10:00:13 +0800

有了解 CRM 比较多的社员么？期待推荐一款基于 RAILS 的 CRM 系统谢谢

阿里云 VPS rbenv install XXX 卡住了，求解？

zhulinpinyu — Thu, 04 Jul 2013 15:28:43 +0800

有人遇到没，rbenv install xxx 卡住不动了，求解？

CodeSchool 福利来啦

zhulinpinyu — Thu, 27 Jun 2013 17:18:28 +0800

利用一下面链接注册 newrelic 并部署一个项目即可获得 codeschool 免费学习一月的打折码

https://newrelic.com/lp/codeschool?utm_source=CSCH&utm_medium=email&utm_content=codeschool&utm_campaign=codeschool&url_term=giveaway&mpc=EM-CSCH-web-en-100-freeweekend-giveaway&mkt_tok=3RkMMJWWfF9wsRojuarKZKXonjHpfsX56%2BUuXq%2B%2BlMI%2F0ER3fOvrPUfGjI4FSsJnI%2BSLDwEYGJlv6SgFTrHHMa16ybgFUhU%3D

[深圳][求职贴] 求 RoR 开发职位

zhulinpinyu — Thu, 13 Jun 2013 10:15:30 +0800

本人从事 RoR 开发，因公司 RoR 团队解散故离职，为不使所学荒废，现求 RoR 开发工作一份. 同时本人对 Angularjs 及 nodejs 有使用经验。求带走。

Uuntu 下 Sublime text 2 中文无法输入终极解决方案

zhulinpinyu — Mon, 20 May 2013 15:19:20 +0800

参照博文： http://zhulinpinyu.github.io/ubuntu/2013/05/17/ubuntusublime-text-2-/

Hi All 有哪为高手能推荐几个完整的 BDD/TDD rails 项目 ?

zhulinpinyu — Thu, 21 Mar 2013 11:00:47 +0800

Hi All 有哪为高手能推荐一个完整的 BDD/TDD rails 项目 ?

谢谢！

RSpec 中 let 和 subject 的区别是什么？

zhulinpinyu — Sat, 09 Mar 2013 12:01:26 +0800

rspec 中 let 和 subject 的区别是什么？有哪为大牛帮助解释解释。谢谢

resque 配合 postgresql 使用出现 ssl 错误

zhulinpinyu — Mon, 18 Feb 2013 18:28:28 +0800

ActiveRecord::StatementInvalid Error PG::Error: SSL error: decryption failed or bad record mac : SELECT a.attname, format_type(a.atttypid, a.atttypmod), pg_get_expr(d.adbin, d.adrelid), a.attnotnull, a.atttypid, a.atttypmod FROM pg_attribute a LEFT JOIN pg_attrdef d ON a.attrelid = d.adrelid AND a.attnum = d.adnum WHERE a.attrelid = '"users"'::regclass AND a.attnum > 0 AND NOT a.attisdropped ORDER BY a.attnum

解决方法：

task "resque:setup" => :environment do ENV['QUEUE'] = '*' Resque.after_fork = Proc.new { ActiveRecord::Base.establish_connection } end

http://stackoverflow.com/questions/9915146/resque-with-rails-3-heroku-redistogo-giving-postgresql-error

Hi @yedingding 有个问题

zhulinpinyu — Thu, 31 Jan 2013 17:06:45 +0800

clone 你的源码 (https://github.com/sishen/chathip.git) 没做改动。 @yedingding 在 railscast-china live-show 1 中 sessions_controller.测试不能通过。始终报的错误为： 1) SessionsController#create #has user should login in Failure/Error: post :create ActionController::RoutingError: No route matches {:controller=>"sessions", :action=>"create"} # ./spec/controllers/sessions_controller_spec.rb:22:in block (5 levels) in <top (required)>' # ./spec/controllers/sessions_controller_spec.rb:21:inblock (4 levels) in '

2) SessionsController#create #new user should create the user Failure/Error: post :create ActionController::RoutingError: No route matches {:controller=>"sessions", :action=>"create"} # ./spec/controllers/sessions_controller_spec.rb:40:in `block (4 levels) in '

求解！谢谢！

rvmsudo rails s -p 80 sudo: rails: command not found 解决办法

zhulinpinyu — Tue, 22 Jan 2013 15:44:02 +0800

打开 rvmsudo 文件添加黑体字部分再试

eval command sudo \"\${sudo_args[@]}\" /usr/bin/env $( /usr/bin/env | awk -F= 'BEGIN{v=0;}/^[a-zA-Z_][a-zA-Z0-9_]=/{v=1;}v==1&&$2~/^['\''\$]/{v=2;} v==1&&$2~/^() {/{v=0;} v==1&&$2~/^(/{v=3;}v==2&&/'\''$/&&!/'\'\''$/{v=1;}v==3&&/)$/{v=1;}v{print;}v==1{v=0;}' | GREP_OPTIONS="" \grep -E '^rvm|^gemset|^http_|^PATH|^IRBRC|RUBY|GEM' | sed 's/=(.)$/="\1"/' ) \"\$@\" ||

zhulinpinyu (竹林品雨)

Let’ s Build |> 使用 Elixir，Phoenix 和 React 打造克隆版的 Slack (part 3 — Frontend Authentication)

保存用户会话（Persisting User Sessions）

路由保护（Protecting Routes）

[译] Let’ s Build |> 使用 Elixir，Phoenix 和 React 打造克隆版的 Slack (part 2 — Backend Authentication)

[译] Let’ s Build |> 使用 Elixir，Phoenix 和 React 打造克隆版的 Slack (part 1 — Project setup)

缘起

我们要做什么

技术栈

项目结构

创建 Phoenix 应用

创建 React 应用

配置 Phoenix 项目

配置 React 项目

配置 React/Redux

新手本地搭建 ruby-china 入门第一弹之创建管理员帐号

Ruby module 疑问？

用 resque 实现后台上传任务时 出现编码错误的问题？

制作 Ubuntu ISO 镜像，求靠谱的方法？

有了解 CRM 比较多的社员么？期待推荐一款基于 RAILS 的 CRM 系统 谢谢

阿里云 VPS rbenv install XXX 卡住了，求解？

CodeSchool 福利来啦

[深圳][求职贴] 求 RoR 开发职位

Uuntu 下 Sublime text 2 中文无法输入终极解决方案

Hi All 有哪为高手能推荐几个完整的 BDD/TDD rails 项目 ?

RSpec 中 let 和 subject 的区别是什么？

resque 配合 postgresql 使用出现 ssl 错误

Hi @yedingding 有个问题

rvmsudo rails s -p 80 sudo: rails: command not found 解决办法

用 resque 实现后台上传任务时出现编码错误的问题？

有了解 CRM 比较多的社员么？期待推荐一款基于 RAILS 的 CRM 系统谢谢