如何讓Nodejs支持H5 History模式(connect-history-api-fallback源碼分析)
導(dǎo)讀
本文主要是對(duì)connect-history-api-fallback庫(kù)進(jìn)行一次源碼分析。connect-history-api-fallback是一個(gè)用于支持SPA History路由模式的nodejs庫(kù)。閱讀本文前,應(yīng)對(duì)HTML5 History模式有一定程度的了解!
源碼分析
/**
* 前端需要開(kāi)啟history模式,而后端根據(jù)url并不知道前端在請(qǐng)求api還是在請(qǐng)求頁(yè)面,如localhost:4200/home這種url,前端理所當(dāng)然認(rèn)為“我需要得到html,并跳轉(zhuǎn)到首頁(yè)”,然而后端并不能區(qū)分。
* 因此需要一種判斷機(jī)制,來(lái)使得后端能分析出前端的請(qǐng)求目的。
* connect-history-api-fallback 這個(gè)中間件正好幫我們完成了上述分析操作,來(lái)看下它是怎么實(shí)現(xiàn)的吧!
* 第一次把自己的源碼分析思路寫(xiě)出來(lái),說(shuō)得不對(duì)的地方,請(qǐng)指出!
*/
'use strict';
var url = require('url');
exports = module.exports = function historyApiFallback(options) {
// 接收配置參數(shù)
options = options || {};
// 初始化日志管理器
var logger = getLogger(options);
// 中間件是要返回一個(gè)函數(shù)的,函數(shù)形參有req, res, next
return function(req, res, next) {
var headers = req.headers;
if (req.method !== 'GET') {
// 如果請(qǐng)求方法不是GET類型,說(shuō)明不需要返回html,那么就調(diào)用next(),把請(qǐng)求交給下一個(gè)中間件
logger(
'Not rewriting',
req.method,
req.url,
'because the method is not GET.'
);
return next();
} else if (!headers || typeof headers.accept !== 'string') {
// 如果沒(méi)有請(qǐng)求頭,或者請(qǐng)求頭中的accept不是字符串,說(shuō)明不是一個(gè)標(biāo)準(zhǔn)的http請(qǐng)求,也不予處理,把請(qǐng)求交給下一個(gè)中間件
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類型的響應(yīng),說(shuō)明也不是在請(qǐng)求html,也不予處理,把請(qǐng)求交給下一個(gè)中間件
logger(
'Not rewriting',
req.method,
req.url,
'because the client prefers JSON.'
);
return next();
} else if (!acceptsHtml(headers.accept, options)) {
// 如果請(qǐng)求頭中不包含配置的Accept或者默認(rèn)的['text/html', '*/*'],那么說(shuō)明也不是在請(qǐng)求html,也不予處理,把請(qǐng)求交給下一個(gè)中間件
logger(
'Not rewriting',
req.method,
req.url,
'because the client does not accept HTML.'
);
return next();
}
// 走到這里說(shuō)明是在請(qǐng)求html了,要開(kāi)始秀操作了
// 首先利用url模塊的parse方法解析下url,會(huì)得到一個(gè)對(duì)象,包括protocol,hash,path, pathname, query, search等字段,類似瀏覽器的location對(duì)象
var parsedUrl = url.parse(req.url);
var rewriteTarget;
// 然后得到配置中的rewrites,也就是重定向配置;
// 重定向配置是一個(gè)數(shù)組,每一項(xiàng)都包含from和to兩個(gè)屬性;
// from是用來(lái)正則匹配pathname是否需要重定向的;
// to則是重定向的url,to可以是一個(gè)字符串,也可以是一個(gè)回調(diào)方法來(lái)返回一個(gè)字符串,回調(diào)函數(shù)接收一個(gè)上下文參數(shù)context,context包含三個(gè)屬性(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,說(shuō)明pathname和重定向配置匹配上了
rewriteTarget = evaluateRewriteRule(parsedUrl, match, rewrite.to, req);
if(rewriteTarget.charAt(0) !== '/') {
// 推薦使用/開(kāi)頭的絕對(duì)路徑作為重定向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);
// 進(jìn)行重定向url操作
req.url = rewriteTarget;
return next();
}
}
var pathname = parsedUrl.pathname;
// 首先說(shuō)明一下:校驗(yàn)邏輯默認(rèn)是會(huì)去檢查url中最后的.號(hào)的,有.號(hào)的說(shuō)明在請(qǐng)求文件,那就跟history模式就沒(méi)什么鳥(niǎo)關(guān)系了
// 我暫且將上述規(guī)則成為“點(diǎn)號(hào)校驗(yàn)規(guī)則”
// disableDotRule為true,代表禁用點(diǎn)號(hào)校驗(yàn)規(guī)則
if (pathname.lastIndexOf('.') > pathname.lastIndexOf('/') &&
options.disableDotRule !== true) {
// 如果pathname的最后一個(gè)/之后還有.,說(shuō)明請(qǐng)求的是/a/b/c/d.*的文件(*代表任意文件類型);
// 如果此時(shí)配置disableDotRule為false,說(shuō)明開(kāi)啟點(diǎn)號(hào)校驗(yàn)規(guī)則,那么不予處理,交給其他中間件
logger(
'Not rewriting',
req.method,
req.url,
'because the path includes a dot (.) character.'
);
return next();
}
// 如果pathname最后一個(gè)/之后沒(méi)有.,或者disableDotRule為true,都會(huì)走到最后一步:重寫(xiě)url
// 重寫(xiě)url有默認(rèn)值/index.html,也可以通過(guò)配置中的index自定義
rewriteTarget = options.index || '/index.html';
logger('Rewriting', req.method, req.url, 'to', rewriteTarget);
// 重寫(xiě)url
req.url = rewriteTarget;
// 此時(shí)再將執(zhí)行權(quán)交給下一個(gè)中間件(url都換成index.html了,后面的路由等中間件也不會(huì)再處理了,然后前端接收到html就開(kāi)始解析路由了,目的達(dá)到?。?
next();
};
};
// 判斷重定向配置中的to
function evaluateRewriteRule(parsedUrl, match, rule, req) {
if (typeof rule === 'string') {
// 如果是字符串,直接返回
return rule;
} else if (typeof rule !== 'function') {
// 如果不是函數(shù),拋出錯(cuò)誤
throw new Error('Rewrite rule can only be of type string or function.');
}
// 執(zhí)行自定義的回調(diào)函數(shù),得到一個(gè)重定向的url
return rule({
parsedUrl: parsedUrl,
match: match,
request: req
});
}
// 判斷請(qǐng)求頭的accept是不是包含在配置數(shù)組或默認(rèn)數(shù)組的范圍內(nèi)
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,默認(rèn)使用console.log作為日志方法
return console.log.bind(console);
}
// 否則就沒(méi)有日志方法,就不記錄日志咯
return function(){};
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- vuejs router history 配置到iis的方法
- javascript history對(duì)象詳解
- JavaScript的History API使搜索引擎抓取AJAX內(nèi)容
- JavaScript編程中window的location與history對(duì)象詳解
- js判斷當(dāng)頁(yè)面無(wú)法回退時(shí)關(guān)閉網(wǎng)頁(yè)否則就history.go(-1)
- javascript history對(duì)象(歷史記錄)使用方法(實(shí)現(xiàn)瀏覽器前進(jìn)后退)
- js history對(duì)象簡(jiǎn)單實(shí)現(xiàn)返回和前進(jìn)
- javascript:history.go()和History.back()的區(qū)別及應(yīng)用
- javascript History對(duì)象原理解析
相關(guān)文章
Node.js連接MySQL數(shù)據(jù)庫(kù)的操作步驟
在現(xiàn)代 Web 開(kāi)發(fā)中,與數(shù)據(jù)庫(kù)的交互是不可避免的一部分,Node.js提供了許多庫(kù)和模塊,使得連接和操作 MySQL 數(shù)據(jù)庫(kù)變得相對(duì)簡(jiǎn)單,本文將介紹如何使用Node.js連接MySQL數(shù)據(jù)庫(kù),并進(jìn)行一些基本的操作,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-11-11
node.js中的url.format方法使用說(shuō)明
這篇文章主要介紹了node.js中的url.format方法使用說(shuō)明,本文介紹了url.format的方法說(shuō)明、語(yǔ)法、接收參數(shù)、使用實(shí)例和實(shí)現(xiàn)源碼,需要的朋友可以參考下2014-12-12
如何在node.js中使用?JsonWebToken模塊進(jìn)行token加密
目前在web框架中最流行的身份驗(yàn)證是使用jsonwebtoken,簡(jiǎn)稱jwt.可以設(shè)置加密方式,過(guò)期時(shí)間,存放個(gè)人信息,逆解析,下面這篇文章主要給大家介紹了關(guān)于如何在node.js中使用?JsonWebToken模塊進(jìn)行token加密的相關(guān)資料,需要的朋友可以參考下2023-03-03
node.js基于dgram數(shù)據(jù)報(bào)模塊創(chuàng)建UDP服務(wù)器和客戶端操作示例
這篇文章主要介紹了node.js基于dgram數(shù)據(jù)報(bào)模塊創(chuàng)建UDP服務(wù)器和客戶端操作,結(jié)合實(shí)例形式分析了node.js使用dgram數(shù)據(jù)報(bào)模塊創(chuàng)建UDP服務(wù)器和客戶端,以及進(jìn)行UDP廣播、組播相關(guān)操作技巧,需要的朋友可以參考下2020-02-02
node以及npm版本不對(duì)應(yīng)出錯(cuò)的完美解決方法
最近項(xiàng)目用到了node和npm,查看一下當(dāng)前版本,發(fā)現(xiàn)有報(bào)錯(cuò),下面這篇文章主要給大家介紹了關(guān)于node以及npm版本不對(duì)應(yīng)出錯(cuò)的完美解決方法,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2023-05-05
Node.js中console.log()輸出彩色字體的方法示例
這篇文章主要給大家介紹了關(guān)于Node.js中console.log()輸出彩色字體的相關(guān)資料,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家學(xué)習(xí)或者使用Node.js具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-12-12

