React全家桶入門之十登入與身份認證

細緻想想。我們的後台系統還沒有乙個登入功能，太不靠譜，趕緊把防盜門安上！

spa的鑑權方式和傳統的web應用不同：因為頁面的渲染不再依賴服務端，與服務端的互動都通過介面來完畢，而reastful風格的介面提倡無狀態（state less）。通常不使用cookie和session來進行身份認證。

比較流行的一種方式是使用web token，所謂的token能夠看作是乙個標識身份的令牌。

client在登入成功後能夠獲得服務端加密後的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) 
} if (unauthorized) else 
};

新建/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) = req.body;
if (account === 'admin' && password === '123456') else 
});server.use(require('./auth'));
server.use(router);
server.listen(3000, function
() );

改動/package.json檔案裡的scripts.server：

,
...}

然後使用npm run server重新啟動伺服器。

如今我們的伺服器就擁有了身份認證的功能，訪問除了』/login』外的其他介面時。服務端會依據請求的header中access-token來推斷請求是否有效，假設無效則會返回401狀態碼。

當client收到401的狀態碼時。須要跳轉到登入頁面進行登入。有效的管理員賬號為admin。密碼為123456。

以post方法提交下面的引數到』http://localhost:3000/login『介面，就能夠完畢登入。

登入成功後。介面返回true，而且在返回的headers中包括了乙個有效的access-token，用於在後面的請求中使用；登入失敗則返回false。

access-token的有效期為1分鐘，每次有效的介面請求都會獲得新的access-token；若1分鐘內沒有做操作，則會過期須要又一次登入。

我們的access-token僅僅是乙個簡單的timestamp，且沒有做不論什麼加密措施。

因為我們每乙個介面的請求都須要加上乙個名為access-token的header，在每次須要呼叫介面的時候都寫一遍就很的不明智了，所以我們須要封裝fetch方法。

新建/src/utils/request.js。寫入下面**：

import  from 'react-router';
export default
function
request
(method, url, body) else 
return fetch(url, ,
body
}).then((res) => else 
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, from '../utils/request';
class bookeditor extends react.component 
request(method, apiurl, )
.then((res) => else 
}).catch((err) => console.error(err));
} getrecommendusers (partialuserid) 
...});
} ...
}...

其他還有/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檔案；

title="請登入">

登入頁面元件和usereditor或者bookeditor相似，都是乙個表單。

在這裡提交表單成功後跳轉到首頁。

最後，別忘了加上登入頁面的路由。

React全家桶入門之十登入與身份認證

React全家桶專案

React全家桶環境搭建過程

React學習筆記二 react全家桶專案實戰

React全家桶入門之十 登入與身份認證

React全家桶專案

React全家桶環境搭建過程

React學習筆記 二 react全家桶專案實戰

相關推薦

React全家桶入門之十登入與身份認證

React學習筆記二 react全家桶專案實戰