关于前后端分离鉴权的思考

前后端分离项目的 Token 存储问题由来已久,有的人存 Cookie 有的人存 LocalStorage 或 SessionStorage。在之前的个人项目中,曾经花时间去研究这个问题,以下分享下我的看法。 如何安全的传输用户 token 这是最传统也是最简单的方式了,前端登录,后端根据用户信息生成一个 token,并保存这个 token 和对应的用户 id,接着把 token 传给用户,存入浏览器 cookie,之后浏览器请求带上这个 cookie,后端根据这个 cookie 来标识用户。 但这样做问题就很多,

AngularJS 实践总结

搞了快一年的 Angular,Angular 真的是一个非常强大非常齐全非常好用的框架,而且拥有强大的社区支持,虽然踩了很多坑,但是仍然无悔学习了这样一个框架。Angular 2 已经正式发布了,我也打算学 Angular2 去了,现在手头上还有一个用 Angular 的项目,这个项目我是想把我学到的很多 Angular 的最佳实践都用进去,借此我就想干脆也写几篇博客总结下好了,我写的比较散,想到什么就说什么。 使用单次绑定或单向绑定 从 Angular 1.3 开始就有了 once-time binding,Angular 1.5

AngularJS 之折腾记

前几天 Angular2 正式发布了,虽然他也在我的学习计划里面,但我并没有把他应用在我最近开展的一个项目中。最近在写一个 Rss 订阅器,基于 Angular1 和 Koa2(总感觉两个有点不搭 =.= ),主要是不想在这个项目花太长时间,再者我还想集我目前掌握的所有技术之大成写一个能拿的出手的项目,所以就没有选择 Angular2 了。至于 Koa2,其实很早就想学了,只是之前一直在忙别的。 angular-resource 介绍 今天捣鼓 Angular 的 Resource 功能,前端后端都掌握在自己的手上时去用 Angular 的 Resource

提升网站加载速度的 N 个方法

Web 这几年的一个变化之一估计就是各种优化小技巧不断涌出...自己也琢磨和尝试了不少优化,毕竟自己项目的网页首屏加载也是一度接近 2M 的。以下针对 HTTP1 和 HTTP1.1,在 HTTP2 中,很多最佳实践都适得其反了。 减少文件传输数量 现在前端代码发布上线的时候一般都会进行压缩,混淆,合并等操作,他们起到了减少文件体积和数量以及混淆代码降低可读性的作用。 浏览器针对同一域名的并发请求数目是有限制的,而在 HTTP1 和 HTTP1.1 中每传输一个资源就得建立一条连接。因此当网站的请求资源数量过多时,会导致后面资源请求的阻塞,也会导致频繁的连接建立和关闭带来的开销。一般浏览器的并发请求数量在4-8之间。因此我们针对同一域名的资源不宜过多,否则就会导致后面资源的阻塞。

浅谈 Angular 脏检查

Angular 的脏值检查机制一直是 Angular 被人诟病的地方,但瑕不掩瑜,Angular 还是一个非常优秀的框架,并且 Angular2 也已经抛弃了这个脏值检查的算法。 最近在看《AngularJS 深度剖析与最佳实践》,不得不说是一本很好的书籍,作者在第三章开始讲背后的原理,这里分析了 Angular 的 $digest 函数,即脏检查机制。所以自己也去下载了 Angular 最新的源码去瞧了下,然后做下笔记吧。 首先要注意,Angular 的 digest 的触发不是定时的,只有在指定的事件触发之后才会进入 $digest。基本上我们用的带

AngularJS 项目采坑笔记

有段时间没写博客了,前段时间在看 Underscore 源码所以写的多了点,这段时间还是在忙自己的其他项目去了,还是有不少收获的。 Angular 视图过渡动画 之前使用 angular-promise-button 这个模块实现了按钮的自动变化,以前自己是用很多标志位来判断特别二。不仅如此,页面切换动画也是用标志位判断,这样就特别不好维护特别不优雅,上次重构的时候就把这些全部去掉了。但是问题来了,页面数据未到达时候页面就渲染肯定会造成视觉上的问题,怎么解决呢。 我们都想写一些应用很广的代码,比如指令,比如上面这个 angular-promise-button 模块等等。其实要解决上面的问题,也是几行代码就可以解决的事情了。 我所使用的是 Angular 的 ui-router。ngRoute 应该也差不多。 在

Underscore 源码学习 (五) - Throttle 和 Debounce

Underscore 的函数大部分还是挺好理解的,感觉过一遍就行了,不过今天看到两个函数感觉还是挺有意思的,并且也挺常用。这两个函数就是 throttle 和 debounce。 throttle _.throttle = function(func, wait, options) { var timeout, context, args, result; var previous = 0; if (!options) options = {}; var later = function() { // 更改previous即上一次执行时间为当前时间 previous = options.leading

谈谈 React 和 Redux

刚回到家的时候学习了 React 和 Redux,现在才想来总结一下,不知道会不会忘的差不多了...本来是想写一个问卷发布系统的,使用 React 和 Redux 已经完成了基础的几个功能,但是那个代码量...用 Angular 写简直轻轻松松的好吧...然后就去重构项目还有现在学的 Underscore 去了。是时候重新回顾下了。 此处主要讲的是 Redux 。 关于 Redux redux 是facebook 提出的 flux 架构的一种优秀实现;而且不局限于为 react 提供数据状态处理。它是零依赖的,

Underscore 源码学习 (二) - 迭代

Underscore 源码的学习落下了好几天,因为前几天一直正在重构项目和搞 React,不过这几天应该会花较多时间在 Underscore 上面了。 这次主要说下 Underscore 两个比较重要的函数吧,一个是optimizeCb,另一个是cb,这两个花了我挺长时间看的,而且是整个 Underscore 非常重要的函数,后面很多地方都使用到了它。 optimizeCb 函数 var optimizeCb = function(func, context, argCount) { if (context === void 0) return func; switch (argCount

AngularJS 项目重构

上学期由于期末停工的项目又要继续开展了,然而停了一个多月的时间,我已经看不下去他的代码了,简直惨不忍睹,花了我将近40个小时的时间去做了重构。虽然重构说明有进步了,但是一改就要改几十个页面啊...累觉不爱..说一说这次将近40小时的重构吧。 Angular 重构 项目是基于 Angular 的 SPA,项目参考Angular规范进行重构,主要是以下几点: 把控制器的业务逻辑(主要是 HTTP 请求)分离到 Factory Controller 和 Directive 以及 Factory 全部用立即函数包装 Controller 和 Directive 以及

Underscore 源码学习 (一)

暑假打算研究一下 Underscore 源码,我会对一些我觉得比较有意思的点拿出来讨论下,不过我不会过多介绍,也不会去分析 Underscore 的各个方法,但我会附上一些相关的不错的参考资料。由于我也是初学阶段,所以如果有说的不正确的地方望指出。 要点1:立即执行函数 Underscore 的内容都用这么一个东西包装起来了。 (function(){..}()); 其实也可以这样写 (function(){})(); Underscore 把全部内容封装在立即执行函数里面,就形成了一个独立的作用域,与外部隔离,并且这样做还形成了闭包,可以模拟私有方法。 推荐阅读: immediately-invoked-function-expression(英) immediately-invoked-function-expression(中) JavaScript中的立即执行函数 Closures 要点2:兼容浏览器和

ARP 攻击和无线网卡混杂模式

一次小小的 Hack 尝试... 前段时间换上了 Arch,就开始想这捣鼓一些黑科技。脑海中立即浮现出两个词, monitor 和 ARP 。 ARP 攻击 学过计算机网络了,大概了解ARP攻击这么一回事,但是当我真正去试的时候,才发现局域网原来真的这么脆弱,因为进行ARP攻击实在太容易了。实际上就是几条命令的事情。 主机发现和端口扫描 进行攻击第一步当然就是找目标了。可以使用 nmap 这个工具来进行,这东西简直渗透利器。 nmap -sP 192.168.1.0/24 这样就可以扫描192.168.

从输入 URL 到页面展示

本文从网络层以上讨论从浏览器输入 HTTPS 协议的 URL 到页面展现的全过程。由于不同浏览器之间也存在差异,这里以 Chrome 浏览器为例。 1. DNS查询 DNS 缓存有好几个环节,浏览器缓存,系统缓存,路由器缓存,ISP 缓存。 浏览器首先会查看自身是否已经有进行 DNS 缓存。Chrome 可以通过 chrome://net-internals/#dns 查看缓存的 DNS,浏览器的 DNS 缓存可以加快 DNS 解析速度,

AngularJS 学习总结

这学期基本都是在学习和使用 Angular ,这篇文章主要是想介绍几个 Angular 需要注意或者了解的地方。 Angular作用域 ​ 也许你知道 ng-if 和 ng-show 的区别是一个只有条件满足的时候才会创建 DOM ,一个是只有在条件满足的时候才会显示 DOM 也就是一开始也会跟着创建。但是你可能不知道, ng-if 会产生新的作用域, ng-repeat 和 ng-switch 和 ng-include 也是如此。这时候内部如果使用外部的变量,第一次的时候会正常显示,因为 Angular 的继承是原型链继承,如果子类没有这个属性就会去尝试继承父类的属性, Angular 会拿父类的属性来创建新的属于这个子类的属性,而这个属性将不再和外层的父类的属性挂钩,