仔細想想，我們的后臺系統還沒有一個登錄功能，太不靠譜，趕緊把防盜門安上！
SPA的鑒權方式和傳統的web應用不同：由于頁面的渲染不再依賴服務端，與服務端的交互都通過接口來完成，而REASTful風格的接口提倡無狀態（state less），通常不使用cookie和session來進行身份認證。
比較流行的一種方式是使用web token，所謂的token可以看作是一個標識身份的令牌。客戶端在登錄成功后可以獲得服務端加密后的token，然后在后續需要身份認證的接口請求中在header中帶上這個token，服務端就可以通過判斷token的有效性來驗證該請求是否合法。
我們先來改造一下服務端，實現一個簡單的基于token的身份認證（可直接復制代碼，無需關心具體實現）。
改造服務端
先在根目錄下執行npm i json-server -D，雖然一開始以全局的方式安裝過json-server這個工具，但本次要在代碼中使用json-server的api，需要將其安裝為項目依賴。
然后新建/server/auth.js文件，寫入以下代碼：
const expireTime = 1000 * 60;module.exports = function (req, res, next) { res.header('access-Control-Expose-Headers', 'access-token'); const now = Date.now(); let unauthorized = true; const token = req.headers['access-token']; if (token) { const expired = now - token > expireTime; if (!expired) { unauthorized = false; res.header('access-token', now); } } if (unauthorized) { res.sendStatus(401); } else { next(); }};新建/server/index.js文件，寫入以下代碼：
const path = require('path');const jsonServer = require('json-server');const server = jsonServer.create();const router = jsonServer.router(path.join(__dirname, 'db.json'));const middlewares = jsonServer.defaults();server.use(jsonServer.bodyParser);server.use(middlewares);server.post('/login', function (req, res, next) { res.header('Access-Control-Expose-Headers', 'access-token'); const {account, passWord} = req.body; if (account === 'admin' && password === '123456') { res.header('access-token', Date.now()); res.json(true); } else { res.json(false); }});server.use(require('./auth'));server.use(router);server.listen(3000, function () { console.log('JSON Server is running in http://localhost:3000');});修改/package.json文件中的scripts.server：
{ ... "scripts": { "server": "node server/index.js", ... }, ...}然后使用npm run server重啟服務器。
現在我們的服務器就擁有了身份認證的功能，訪問除了’/login’外的其它接口時，服務端會根據請求的header中access-token來判斷請求是否有效，如果無效則會返回401狀態碼。
當客戶端收到401的狀態碼時，需要跳轉到登錄頁面進行登錄，有效的管理員賬號為admin，密碼為123456。
以POST方法提交下面的參數到’http://localhost:3000/login‘接口，就能夠完成登錄。
{ "account": "admin", "password": "123456"}登錄成功后，接口返回true，并且在返回的headers中包含了一個有效的access-token，用于在后面的請求中使用；登錄失敗則返回false。
access-token的有效期為1分鐘，每次有效的接口請求都會獲得新的access-token；若1分鐘內沒有做操作，則會過期需要重新登錄。
我們的access-token只是一個簡單的timestamp，且沒有做任何加密措施。
封裝fetch
由于我們每個接口的請求都需要加上一個名為access-token的header，在每次需要調用接口的時候都寫一遍就非常的不明智了，所以我們需要封裝fetch方法。
新建/src/utils/request.js，寫入以下代碼：
import { hashHistory } from 'react-router';export default function request (method, url, body) { method = method.toUpperCase(); if (method === 'GET') { // fetch的GET不允許有body，參數只能放在url中 body = undefined; } else { body = body && JSON.stringify(body); } return fetch(url, { method, headers: { 'Content-Type': 'application/json', 'Accept': 'application/json', 'Access-Token': sessionStorage.getItem('access_token') // 從sessionStorage中獲取access token }, body }) .then((res) => { if (res.status === 401) { hashHistory.push('/login'); return request方法封裝了添加access-token頭等邏輯，然后就可以在需要調用接口的時候使用request或get、post等方法了，比如/src/components/BookEditor.js：...import request, {get} from '../utils/request';class BookEditor extends React.Component { ... handleSubmit (e) { ... let editType = '添加'; let apiUrl = 'http://localhost:3000/book'; let method = 'post'; if (editTarget) { ... } request(method, apiUrl, { name: name.value, price: price.value, owner_id: owner_id.value }) .then((res) => { if (res.id) { ... } else { ... } }) .catch((err) => console.error(err)); } getRecommendUsers (partialUserId) { get('http://localhost:3000/user?id_like=' + partialUserId) .then((res) => { if (res.length === 1 && res[0].id === partialUserId) { return; } ... }); } ...}...其它還有/src/components/UserEditor.js、/src/pages/BookEdit.js、/src/pages/BookList.js、/src/pages/UserEdit.js和/src/pages/UserList.js文件需要進行相應的修改。
實現登錄頁面
現在嘗試訪問一下用戶列表頁，發現表格里面并沒有數據，因為沒有登錄接口訪問被拒絕了并且嘗試跳轉到路由’/login’。
現在來實現一個登錄頁面組件，在/src/pages下新建Login.js文件；
import React from 'react';import HomeLayout from '../layouts/HomeLayout';import FormItem from '../components/FormItem';import { post } from '../utils/request';import formProvider from '../utils/formProvider';class Login extends React.Component { constructor () { super(); this.handleSubmit = this.handleSubmit.bind(this); } handleSubmit (e) { e.preventDefault(); const {formValid, form: {account, password}} = this.props; if (!formValid) { alert('請輸入賬號或密碼'); return; } post('http://localhost:3000/login', { account: account.value, password: password.value }) .then((res) => { if (res) { this.context.router.push('/'); } else { alert('登錄失敗，賬號或密碼錯誤'); } }) } render () { const {form: {account, password}, onFormChange} = this.props; return ( <HomeLayout title="請登錄"> <form onSubmit={this.handleSubmit}> <FormItem label="賬號：" valid={account.valid} error={account.error}> <input type="text" value={account.value} onChange={e => onFormChange('account', e.target.value)}/> </FormItem> <FormItem label="密碼：" valid={password.valid} error={password.error}> <input type="password" value={password.value} onChange={e => onFormChange('password', e.target.value)}/> </FormItem> <br/> <input type="submit" value="登錄"/> </form> </HomeLayout> ); }}Login.contextTypes = { router: React.PropTypes.object.isRequired};Login = formProvider({ account: { defaultValue: '', rules: [ { pattern (value) { return value.length > 0; }, error: '請輸入賬號' } ] }, password: { defaultValue: '', rules: [ { pattern (value) { return value.length > 0; }, error: '請輸入密碼' } ] }})(Login);export default Login;登錄頁面組件和UserEditor或者BookEditor類似，都是一個表單。
在這里提交表單成功后跳轉到首頁。
最后，別忘了加上登錄頁面的路由。
最終效果
