【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 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', '