导读

本文主要是对 connect-history-api-fallback 库进行一次源码分析。connect-history-api-fallback是一个用于支持 SPA History 路由模式的 nodejs 库。阅读本文前，应对 HTML5 History 模式有一定程度的了解！

源码分析

/** 
 * 前端需要开启 history 模式，而后端根据 url 并不知道前端在请求 api 还是在请求页面，如 localhost:4200/home 这种 url，前端理所当然认为“我需要得到 html，并跳转到首页”，然而后端并不能区分。* 因此需要一种判断机制，来使得后端能分析出前端的请求目的。* connect-history-api-fallback 这个中间件正好帮我们完成了上述分析操作，来看下它是怎么实现的吧！* 第一次把自己的源码分析思路写出来，说得不对的地方，请指出！*/

'use strict';

var url = require('url');

exports = module.exports = function historyApiFallback(options) {
  // 接收配置参数
  options = options || {};
  // 初始化日志管理器
  var logger = getLogger(options);

  // 中间件是要返回一个函数的，函数形参有 req, res, next
  return function(req, res, next) {
    var headers = req.headers;
    if (req.method !== 'GET') {// 如果请求方法不是 GET 类型，说明不需要返回 html，那么就调用 next()，把请求交给下一个中间件
      logger(
        'Not rewriting',
        req.method,
        req.url,
        'because the method is not GET.'
      );
      return next();} else if (!headers || typeof headers.accept !== 'string') {
      // 如果没有请求头，或者请求头中的 accept 不是字符串，说明不是一个标准的 http 请求，也不予处理，把请求交给下一个中间件
      logger(
        'Not rewriting',
        req.method,
        req.url,
        'because the client did not send an HTTP accept header.'
      );
      return next();} else if (headers.accept.indexOf('application/json') === 0) {
      // 如果客户端希望得到 application/json 类型的响应，说明也不是在请求 html，也不予处理，把请求交给下一个中间件
      logger(
        'Not rewriting',
        req.method,
        req.url,
        'because the client prefers JSON.'
      );
      return next();} else if (!acceptsHtml(headers.accept, options)) {// 如果请求头中不包含配置的 Accept 或者默认的['text/html', '*/*']，那么说明也不是在请求 html，也不予处理，把请求交给下一个中间件
      logger(
        'Not rewriting',
        req.method,
        req.url,
        'because the client does not accept HTML.'
      );
      return next();}

    // 走到这里说明是在请求 html 了，要开始秀操作了

    // 首先利用 url 模块的 parse 方法解析下 url，会得到一个对象，包括 protocol，hash，path, pathname, query, search 等字段，类似浏览器的 location 对象
    var parsedUrl = url.parse(req.url);
    var rewriteTarget;
    // 然后得到配置中的 rewrites，也就是重定向配置；// 重定向配置是一个数组，每一项都包含 from 和 to 两个属性；// from 是用来正则匹配 pathname 是否需要重定向的;
    // to 则是重定向的 url，to 可以是一个字符串，也可以是一个回调方法来返回一个字符串，回调函数接收一个上下文参数 context，context 包含三个属性（parsedUrl，match，request）options.rewrites = options.rewrites || [];
    // 遍历一波重定向配置
    for (var i = 0; i < options.rewrites.length; i++) {var rewrite = options.rewrites[i];
      // 利用字符串的 match 方法去匹配
      var match = parsedUrl.pathname.match(rewrite.from);
      if (match !== null) {
        // 如果 match 不是 null，说明 pathname 和重定向配置匹配上了
        rewriteTarget = evaluateRewriteRule(parsedUrl, match, rewrite.to, req);

        if(rewriteTarget.charAt(0) !== '/') {
          // 推荐使用 / 开头的绝对路径作为重定向 url
          logger(
            'We recommend using an absolute path for the rewrite target.',
            'Received a non-absolute rewrite target',
            rewriteTarget,
            'for URL',
            req.url
          );
        }

        logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
        // 进行重定向 url 操作
        req.url = rewriteTarget;
        return next();}
    }

    var pathname = parsedUrl.pathname;
    // 首先说明一下：校验逻辑默认是会去检查 url 中最后的. 号的，有. 号的说明在请求文件，那就跟 history 模式就没什么鸟关系了
    // 我暂且将上述规则成为“点号校验规则”// disableDotRule 为 true，代表禁用点号校验规则
    if (pathname.lastIndexOf('.') > pathname.lastIndexOf('/') &&
        options.disableDotRule !== true) {
      // 如果 pathname 的最后一个 / 之后还有.，说明请求的是 /a/b/c/d.* 的文件（* 代表任意文件类型）;
      // 如果此时配置 disableDotRule 为 false，说明开启点号校验规则，那么不予处理，交给其他中间件
      logger(
        'Not rewriting',
        req.method,
        req.url,
        'because the path includes a dot (.) character.'
      );
      return next();}

    // 如果 pathname 最后一个 / 之后没有.，或者 disableDotRule 为 true，都会走到最后一步：重写 url
    // 重写 url 有默认值 /index.html，也可以通过配置中的 index 自定义
    rewriteTarget = options.index || '/index.html';
    logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
    // 重写 url
    req.url = rewriteTarget;
    // 此时再将执行权交给下一个中间件（url 都换成 index.html 了，后面的路由等中间件也不会再处理了，然后前端接收到 html 就开始解析路由了，目的达到！）next();};
};

// 判断重定向配置中的 to
function evaluateRewriteRule(parsedUrl, match, rule, req) {if (typeof rule === 'string') {
    // 如果是字符串，直接返回
    return rule;
  } else if (typeof rule !== 'function') {
    // 如果不是函数，抛出错误
    throw new Error('Rewrite rule can only be of type string or function.');
  }

  // 执行自定义的回调函数，得到一个重定向的 url
  return rule({
    parsedUrl: parsedUrl,
    match: match,
    request: req
  });
}

// 判断请求头的 accept 是不是包含在配置数组或默认数组的范围内
function acceptsHtml(header, options) {options.htmlAcceptHeaders = options.htmlAcceptHeaders || ['text/html', '*/*'];
  for (var i = 0; i < options.htmlAcceptHeaders.length; i++) {if (header.indexOf(options.htmlAcceptHeaders[i]) !== -1) {return true;}
  }
  return false;
}

// 处理日志
function getLogger(options) {if (options && options.logger) {
    // 如果有指定的日志方法，则使用指定的日志方法
    return options.logger;
  } else if (options && options.verbose) {
    // 否则，如果配置了 verbose，默认使用 console.log 作为日志方法
    return console.log.bind(console);
  }
  // 否则就没有日志方法，就不记录日志咯
  return function(){};
}