$ create-react-app jwt-frontend
cd jwt-frontend
cnpm i redux react-redux redux-logger redux-saga react-router-dom react-router-redux@next history axios jsonwebtoken -S
import createHistory from 'history/createBrowserHistory';
let history=createHistory();
export default history;
+ import {Provider} from 'react-redux';
+ import store from './store';
+ import App from './containers/App';
+ import {ConnectedRouter} from 'react-router-redux';
+ import history from './history';
+ import 'bootstrap/dist/css/bootstrap.css'
+ ReactDOM.render(<Provider store={store}>
+ <ConnectedRouter history={history}>
+ <App />
+ </ConnectedRouter>
+ </Provider>, document.getElementById('root'));
import React,{Component,Fragment} from 'react'
import {Link} from 'react-router-dom';
class App extends Component{
render() {
return (
<Fragment>
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="#">珠峰博客</a>
</div>
<div>
<ul className="nav navbar-nav">
<li><Link to="/">首页</Link></li>
<li><Link to="/users/signup">注册</Link></li>
<li><Link to="/users/signin">登录</Link></li>
<li><Link to="/articles/add">发表文章</Link></li>
</ul>
</div>
</div>
</nav>
</Fragment>
)
}
}
export default App;
import {createStore} from 'redux';
import reducers from './reducers';
let store=createStore(reducers);
export default store;
import {combineReducers} from 'redux';
import user from './user';
export default combineReducers({
user
});
let initState={};
export default function (state=initState,action) {
return state;
}
src/components/NavHeader.js
import React,{Component} from 'react'
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
class NavHeader extends Component{
render() {
return (
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
<a className="navbar-brand" href="#">珠峰博客</a>
</div>
<div>
<ul className="nav navbar-nav">
<li><Link to="/">首页</Link></li>
<li><Link to="/users/signup">注册</Link></li>
<li><Link to="/users/signin">登录</Link></li>
<li><Link to="/articles/add">发表文章</Link></li>
</ul>
<ul className="nav navbar-nav navbar-right">
<li>
<Link to="/users/signout">欢迎:{this.props.username}</Link>
</li>
<li>
<Link to="/users/signout">退出</Link>
</li>
</ul>
</div>
</div>
</nav>
)
}
}
export default connect(state=>state.user)(NavHeader);
src/containers/Home.js
import React,{Component} from 'react'
export default class Home extends Component{
render() {
return (
<div>Home</div>
)
}
}
src/containers/Signin.js
import React,{Component} from 'react'
export default class Signin extends Component{
render() {
return (
<div>Signin</div>
)
}
}
src/containers/Signup.js
import React,{Component} from 'react'
export default class Signup extends Component{
render() {
return (
<div>Signup</div>
)
}
}
src/containers/article/Add.js
import React,{Component} from 'react'
export default class Add extends Component{
render() {
return (
<div>Article Add</div>
)
}
}
src/store/reducers/user.js
-let initState={};
+let initState={username:'张三'};
src/components/NavHeader.js
import React,{Component} from 'react'
import {Link} from 'react-router-dom';
import {connect} from 'react-redux';
+import actions from '../store/actions/user';
class NavHeader extends Component{
+ componentDidMount() {
+ this.props.loadUser();
+ }
render() {
return (
<nav className="navbar navbar-default">
<div className="container-fluid">
<div className="navbar-header">
- <a className="navbar-brand" href="#">珠峰博客</a>
+ <a className="navbar-brand" href="/">珠峰博客</a>
</div>
<div>
<ul className="nav navbar-nav">
- <li><Link to="/">首页</Link></li>
- <li><Link to="/users/signup">注册</Link></li>
- <li><Link to="/users/signin">登录</Link></li>
- <li><Link to="/articles/add">发表文章</Link></li>
- </ul>
- <ul className="nav navbar-nav navbar-right">
- <li>
- <Link to="/users/signout">欢迎:{this.props.username}</Link>
- </li>
+ <li><Link to="/">首页</Link></li>
+ {
+ !this.props.user&&(<li><Link to="/users/signup">注册</Link></li>
+ )
+ }
+ {
+ !this.props.user&&(<li><Link to="/users/signin">登录</Link></li>)
+ }
+ {
+ this.props.user&&this.props.user.admin&&<li><Link to="/articles/add">发表文章</Link></li>
+ }
+ </ul>
+ {
+ this.props.user&&<ul className="nav navbar-nav navbar-right">
<li>
- <Link to="/users/signout">退出</Link>
- </li>
- </ul>
+ <Link to="/users/signout">欢迎:{this.props.user.username}</Link>
+ </li>
+ <li>
+ <a onClick={this.props.logout}>退出</a>
+ </li>
+ </ul>
+ }
</div>
</div>
</nav>
)
}
}
-export default connect(state=>state.user)(NavHeader);
+export default connect(state=>state.user,actions)(NavHeader);
src/containers/App.js
-import {Link,Route} from 'react-router-dom';
+import {Route} from 'react-router-dom';
src/containers/Signin.js
import React,{Component} from 'react'
-export default class Signin extends Component{
+import actions from '../store/actions/user';
+import {connect} from 'react-redux';
+class Signin extends Component{
+ handleSubmit=(event) => {
+ event.preventDefault();
+ let username=this.username.value;
+ let password=this.password.value;
+ let user={username,password};
+ this.props.login(user);
+ }
render() {
return (
- <div>Signin</div>
+ <form onSubmit={this.handleSubmit}>
+ <div className="form-group">
+ <label htmlFor="username">用户名</label>
+ <input className="form-control" ref={input=>this.username=input}/>
+ </div>
+ <div className="form-group">
+ <label htmlFor="password">密码</label>
+ <input className="form-control" ref={input=>this.password=input}/>
+ </div>
+ <div className="form-group">
+ <input type="submit" className="btn btn-primary"/>
+ </div>
+ {
+ this.props.error&&(
+ <div className="form-group">
+ <div className="alert alert-danger">
+ {this.props.error.toString()}
+ </div>
+ </div>
+ )
+ }
+
+ </form>
)
}
-}
+}
+export default connect(
+ state => state.user,
+ actions
+)(Signin);
src/store/action-types.js
export const LOGIN='LOGIN';
export const LOGOUT='LOGOUT';
export const LOGIN_SUCCESS='LOGIN_SUCCESS';
export const LOGIN_ERROR='LOGIN_ERROR';
export const LOGIN_OUT_SUCCESS='LOGIN_OUT_SUCCESS';
export const LOAD_USER='LOAD_USER';
src/store/index.js
-import {createStore} from 'redux';
+import {createStore,applyMiddleware} from 'redux';
import reducers from './reducers';
-let store=createStore(reducers);
+import createSagaMiddelware from 'redux-saga';
+import logger from 'redux-logger';
+import rootSaga from './saga';
+import {routerMiddleware} from 'react-router-redux';
+import history from '../history';
+let router=routerMiddleware(history);
+let sagaMiddleware=createSagaMiddelware();
+let store=createStore(reducers,applyMiddleware(sagaMiddleware,router,logger));
+sagaMiddleware.run(rootSaga);
export default store;
src/store/saga.js
import * as types from './action-types';
import {put,call,take,all,takeEvery} from 'redux-saga/effects';
import {push} from 'react-router-redux';
import userApi from './api/user';
import {decode} from '../utils/jwt';
function* login(action) {
try {
const response=yield call(userApi.login,action.user);
let {data: {data: {token}}}=response;
window.localStorage.setItem('token',token);
const user=decode(token);
yield put({type: types.LOGIN_SUCCESS,user});
yield put(push('/'));
} catch (error) {
yield put({type: types.LOGIN_ERROR,error});
}
}
function* logout() {
window.localStorage.removeItem('token');
yield put({type: types.LOGIN_OUT_SUCCESS});
yield put(push('/'));
}
function* loginFlow() {
yield takeEvery(types.LOGIN,login);
yield takeEvery(types.LOGOUT,logout);
}
function* loadUser() {
let token = window.localStorage.getItem('token');
if (token) {
const user=decode(token);
if (user) {
yield put({type: types.LOGIN_SUCCESS,user});
yield put(push('/'));
} else {
yield put(push('/users/signin'));
}
}
}
function* watchLoadUser() {
yield takeEvery(types.LOAD_USER,loadUser);
}
export default function* rootSaga() {
yield all([loginFlow(),watchLoadUser()]);
}
src/store/actions/user.js
import * as types from '../action-types';
export default {
login(user) {
return {type:types.LOGIN,user}
},
logout() {
return {type:types.LOGOUT};
},
loadUser() {
return {type:types.LOAD_USER};
}
}
src/store/api/index.js
import axios from 'axios';
const BASE_URL='http://localhost:8080';
axios.interceptors.request.use(config => {
let token=localStorage.getItem('token');
if (token) {
config.headers.Authorization=token;
}
return config;
});
export function post(url,body) {
return axios.post(BASE_URL+'/users/signin',body);
}
src/store/api/user.js
import {post} from './index';
async function login(body) {
return post('/users/signin',body);
}
export default {
login
}
src/store/reducers/index.js
import {combineReducers} from 'redux';
import user from './user';
+import {routerReducer} from 'react-router-redux';
export default combineReducers({
+ router:routerReducer
});
src/store/reducers/user.js
-let initState={username:'张三'};
+import * as types from '../action-types';
+let initState={};
export default function (state=initState,action) {
- return state;
+ switch (action.type) {
+ case types.LOGIN_SUCCESS:
+ return {...state,user:action.user,error: null};
+ case types.LOGIN_ERROR:
+ return {...state,user: null,error: action.error};
+ case types.LOGIN_OUT_SUCCESS:
+ return {...state,user: null,error: null};
+ default:
+ return state;
+ }
}
src/utils/jwt.js
import jwt from 'jsonwebtoken';
export function decode(token) {
return jwt.decode(token);;
}
src/containers/article/Add.js
import React,{Component} from 'react'
-export default class Add extends Component{
+import actions from '../../store/actions/article';
+import {connect} from 'react-redux';
+class Signin extends Component{
+ handleSubmit=(event) => {
+ event.preventDefault();
+ let title=this.title.value;
+ let content=this.content.value;
+ let article={title,content};
+ this.props.add(article);
+ }
render() {
return (
- <div>Article Add</div>
+ <form onSubmit={this.handleSubmit}>
+ <div className="form-group">
+ <label htmlFor="title">标题</label>
+ <input className="form-control" ref={input=>this.title=input}/>
+ </div>
+ <div className="form-group">
+ <label htmlFor="content">内容</label>
+ <textarea className="form-control" ref={input=>this.content=input}/>
+ </div>
+ <div className="form-group">
+ <input type="submit" className="btn btn-primary"/>
+ </div>
+ {
+ this.props.error&&(
+ <div className="form-group">
+ <div className="alert alert-danger">
+ {this.props.error.toString()}
+ </div>
+ </div>
+ )
+ }
+
+ </form>
)
}
-}
+}
+export default connect(
+ state => state.article,
+ actions
+)(Signin);
src/store/action-types.js
-export const LOAD_USER='LOAD_USER';
+export const LOAD_USER='LOAD_USER';
+export const ADD_ARTICLE='ADD_ARTICLE';
+export const ADD_ARTICLE_SUCCESS='ADD_ARTICLE_SUCCESS';
+export const ADD_ARTICLE_ERROR='ADD_ARTICLE_ERROR';
src/store/saga.js
+function* addArticle(action) {
+ try {
+ debugger;
+ yield call(articleApi.add,action.article);
+ yield put(push('/'));
+ } catch (error) {
+ yield put({type: types.ADD_ARTICLE_ERROR,error});
+ }
+}
+
+function* watchAddArticle() {
+ yield takeEvery(types.ADD_ARTICLE,addArticle);
+}
+
export default function* rootSaga() {
- yield all([loginFlow(),watchLoadUser()]);
+ yield all([loginFlow(),watchLoadUser(),watchAddArticle()]);
}
src/store/actions/article.js
import * as types from '../action-types';
export default {
add(article) {
return {type:types.ADD_ARTICLE,article}
}
}
`
src/store/api/article.js
import {post} from '.';
async function add(body) {
return post('/articles/add',body);
}
export default {
add
}
src/store/api/index.js
- return axios.post(BASE_URL+'/users/signin',body);
+ return axios.post(BASE_URL+url,body);
src/store/api/user.js
-import {post} from './index';
+import {post} from '.';
async function login(body) {
return post('/users/signin',body);
}
src/store/reducers/article.js
import * as types from '../action-types';
let initState={};
export default function (state=initState,action) {
switch (action.type) {
case types.ADD_ARTICLE_ERROR:
return {...state,user: null,error: action.error};
default:
return state;
}
}
src/store/reducers/index.js
+ import {routerReducer} from 'react-router-redux';
export default combineReducers({
user,
+ article,
router:routerReducer
});