【React全家桶入門之十】登入與身份認證
仔細想想，我們的後臺系統還沒有一個登入功能，太不靠譜，趕緊把防盜門安上！
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 新建/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。
{
"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 Promise.reject('Unauthorized.');
} else {
const token = res.headers.get('access-token');
if (token) {
sessionStorage.setItem('access_token', token);
}
return res.json();
}
});
}
export const get = url => request('GET', url);
export const post = (url, body) => request('POST', url, body);
export const put = (url, body) => request('PUT', url, body);
export const del = (url, body) => request('DELETE', url, body);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類似，都是一個表單。
在這裡提交表單成功後跳轉到首頁。
最後，別忘了加上登入頁面的路由。
最終效果
